Angularfire身份验证保护和angular材料不能一起工作

Question

我正在试用angularfire和他们的作者守卫。我使用他们的documentation来学习如何设置我的身份验证卫士。一切看起来都很完美，但后来我注意到，在我的登录页面中，角度材料输入字段不再响应。并且控制台中没有错误消息。如果我移除canActivate防护，那么角度材质输入就能正常工作。这里的问题可能是什么，是我错过了某个步骤，还是我需要一些额外的设置？我创建了一个小演示应用程序来测试它，它也有同样的问题。demo app in github

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {LoginComponent} from './login/login.component';
import {canActivate, redirectLoggedInTo, redirectUnauthorizedTo} from '@angular/fire/auth-guard';
import {DashboardComponent} from './dashboard/dashboard.component';

const redirectLoggedInToDashboard = () => redirectLoggedInTo(['dashboard']);
const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);


const routes: Routes = [
  {path: '', redirectTo: 'login', pathMatch: 'full'},
  {path: 'login', component: LoginComponent, ...canActivate(redirectLoggedInToDashboard)},
  {path: 'dashboard', component: DashboardComponent, ...canActivate(redirectUnauthorizedToLogin)},
  {path: '**', redirectTo: 'login'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

login.component.html

<div class="login">
  <mat-form-field appearance="legacy">
    <mat-label>Legacy form field</mat-label>
    <input matInput placeholder="Placeholder">
    <mat-icon matSuffix>sentiment_very_satisfied</mat-icon>
    <mat-hint>Hint</mat-hint>
  </mat-form-field>
</div>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { AngularFireModule } from '@angular/fire';
import {environment} from '../environments/environment';
import {AngularFirestoreModule} from '@angular/fire/firestore';
import {AngularFireAnalyticsModule} from '@angular/fire/analytics';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {AngularFireAuthGuardModule} from '@angular/fire/auth-guard';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatIconModule} from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,

  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFirestoreModule,
    AngularFireAnalyticsModule,
    BrowserAnimationsModule,
    AngularFireAuthGuardModule,
    MatFormFieldModule,
    MatIconModule,
    MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

​

​

更新:打开控制台后，我收到以下警告：Navigation triggered outside Angular zone, did you forget to call 'ngZone.run()'?

Answer 1

您的设置是正确的。然而，目前有一个关于角度区域干扰的问题，因此这就是为什么你在角度材料中看到这个奇怪的问题。您可以查看下面的链接，这个问题已经在Angularfire repo https://github.com/angular/angularfire/issues/2355上报告过了

我在那里添加了你的github存储库和问题报告，因为我有同样的问题。作为一种解决办法，您可以设置自己的自定义身份验证保护，这应该可以暂时解决错误。希望这个问题能很快得到解决。