angular + firebase auth + material =路由器崩溃

Question

在firebase身份验证后路由器无法正常工作.问题是来自@ angular/animations,导入NoopAnimationsModule或BrowserAnimationsModule,路由器无法正常工作

的package.json

"dependencies": { "@angular/animations": "^5.2.8", "@angular/cdk": "^5.2.4", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/material": "^5.2.4", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "angularfire2": "^5.0.0-rc.6", "core-js": "^2.4.1", "firebase": "^4.11.0", "rxjs": "^5.5.6", "zone.js": "^0.8.19" }

我通过Google验证后重定向到路由'/ protected',但页面显示新的路由组件和前一个组件:

问题必须是Angularfire和Material Animations之间的兼容性问题:评论BrowserAnimationsModule的导入修复了这个问题.

为了帮助理解和重现,你有:
- StackBlitz项目令人讨厌的部分是这个例子有效,但仍然呈现一个过渡状态,其中显示了两个组件.
- github存储库,其中最少的代码重现错误.
- 从前一个回购运行的应用程序.

一旦找到修复程序,firebase凭据将停止工作,因此请使用您自己的.

提前致谢.

Answer 1

找到了!找到了!

由于某种原因,你正在做的工作是在角度范围之外.所以.then在login.component不触发时lifecycle.tick,会更新完整的UI.在您的应用程序中,您可以看到login component template在多个void事件(键盘或鼠标输入)之后它将消失,因为它将触发tick但您无法指定事件将如何消失.

这与我们$scope.$apply在angularJs中用于手动触发的类似原因相似digest cycle.

角度4手动操作方式outsideAngularWork需要修改login.component如下

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import { AngularFireAuth } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { NgZone } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor( private router: Router,private zone: NgZone, private afAuth:AngularFireAuth) { }

    login(){
      this.zone.runOutsideAngular(() => {
        this.afAuth
        .auth
        .signInWithPopup(new firebase.auth.GoogleAuthProvider())
        .then(()=>{
            this.zone.run(() => { this.router.navigate(['/protected']);
          });
        })
        .catch(console.error);
      });
    }
}

希望这也能解决您机器上的问题.