AngularDart 在实现 firebase 登录时抛出错误

Question

我正在尝试在我的 AngularDart 项目中实现 firebase google 登录，但是在实现 angular 飞镖时抛出错误。我已经重新检查了 *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 中为整个应用程序注册，这不再受支持，所有使用的指令都需要在它们所在的组件注释中注册用过的。

AngularDart 在实现 firebase 登录时抛出错误

AngularDart throws error while implementing firebase login

dart

firebase

dart-html

angular-dart

firebase-authentication