AngularDart在执行Firebase登录时抛出错误

Question

我正在尝试在我的AngularDart项目中实现firebase google登录，但实现角度箭时抛出错误。我已重新检查*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

也似乎并不火力点是相关的。

@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); 
} 

在角3和更早的指令可以在pubspec.yaml被注册为整个应用程序，这是不支持了，所有使用的指令需要在成分标注在使用它们的注册。