firebase - 实现Firebase登录时AngularDart引发错误

Question

我正在尝试在我的AngularDart项目中实现Firebase Google登录，但是在实现angular dart时抛出错误。我已经重新检查了*ngIf的错字，但找不到所需的东西。

请帮助我，谢谢。

Error running TemplateGenerator for 
my_app|lib/views/layout_component/layout_component.dart.
Error: Template parse errors:
line 32, column 35 of LayoutComponent: ParseErrorLevel.FATAL: Can't bind to 
'ngIf' since it isn't a known native property or known directive. Please fix 
typo or add to directives list.
*ngIf="fbService.user == null"
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
line 32, column 17 of LayoutComponent: ParseErrorLevel.FATAL: Property 
binding ngIf not used by any directive on an embedded template
<div id="sign-in" *ngIf="fbService.user == null" class="horiz">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
line 37, column 36 of LayoutComponent: ParseErrorLevel.FATAL: Can't bind to 
'ngIf' since it isn't a known native property or known directive. Please fix 
typo or add to directives list.
*ngIf="fbService.user != null"
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
line 37, column 17 of LayoutComponent: ParseErrorLevel.FATAL: Property 
binding ngIf not used by any directive on an embedded template
<div id="sign-out" *ngIf="fbService.user != null" class="horiz">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

app_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:your_next_startup/views/layout_component/layout_component.dart';
import 'package:your_next_startup/services/firebase_service.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  templateUrl: 'app_component.html',
  directives: const [
    materialDirectives,
    LayoutComponent,
  ],
  providers: const [
    materialProviders,
    FirebaseService,
  ],
)
class AppComponent {
  final FirebaseService fbService;

  AppComponent(FirebaseService this.fbService);

}

layout_component.dart

import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'package:m_app/services/firebase_service.dart';

@Component(
  selector: 'app-layout',
  styleUrls: const [
        'layout_component.css',
  ],
  templateUrl: 'layout_component.html',
  directives: const [
    materialDirectives,
  ],
  providers: const [
    FirebaseService,
  ],
)
class LayoutComponent {
  final FirebaseService fbService;
  LayoutComponent(FirebaseService this.fbService);
}

layout_component.html

<div class="horiz">
            <div id="sign-in" *ngIf="fbService.user == null" class="horiz">
                <div id="google-icon" class="icon"></div>
                <button class="btn btn-outline-secondary btn-sm" (click)="fbService.signIn()">Google Sign In</button>
            </div>

            <div id="sign-out" *ngIf="fbService.user != null" class="horiz">
                <img class="icon" [src]="fbService.user?.photoURL">
                <div id="user-name">{{fbService.user?.displayName}}</div>
                <button class="btn btn-outline-secondary btn-sm" (click)="fbService.signOut()">Sign Out</button>
            </div>
        </div>

Answer 1

那似乎与firebase无关。

@Component(
  selector: 'app-layout',
  styleUrls: const [
        'layout_component.css',
  ],
  templateUrl: 'layout_component.html',
  directives: const [
    materialDirectives,
    NgIf,              // one of these two
    COMMON_DIRECTIVES, // this one includes NgIf, NgFor, NgSwitchCase, ...  
  ],
  providers: const [
    FirebaseService,
  ],
)
class LayoutComponent {
  final FirebaseService fbService;
  LayoutComponent(FirebaseService this.fbService);
}

在Angular 3和更早版本的指令中，可以为整个应用程序在 pubspec.yaml中注册该指令，现在不再支持该指令，并且所有使用的指令都必须在使用它们的组件注释中注册。