Angular 5 路由器在谷歌登录回调中无法正常工作

Question

我正在构建具有登录名和仪表板以及简单路由的Web应用程序;

我有两个登录选项和路由：

登录选项：

1. 通过电子邮件：

   login(u) {
   this._loginService.login(u)
   .subscribe(data => {
   console.log('Email login successful!');
   this._router.navigate(['/dashboard']);
   });
   

2. 使用谷歌：

   googleLogin() {
   gapi.auth2.authorize({
   client_id: *
   scope: 'email',
   response_type: 'code',
   prompt: 'select_account'
   },
   (response) => {
   if (response.error) {
   return;
   }
   this._loginService.loginWithGoogle(response)
   .subscribe(response1 => {
   console.log('Google login successful!');
   console.log(response);
   this._router.navigate(['/dashboard']);
   });
   });
   

3. 路由器选项：

   const appRoutes: Routes = [ { path: 'dashboard', component: MainComponent}, { path: 'login', component: LoginComponent }

使用电子邮件登录成功后，路由器将导航，不会出现任何问题。

问题是，当谷歌使用谷歌登录登录并且路由器导航到/dashboard 时，应用程序会以这种方式崩溃：

1. 如果我按下按钮更改路线，它只会显示它视图，而不会从 DOM 中删除我的仪表板。
2. 有时登录页面不会从 DOM 中删除
3. 其他函数在我的代码中不起作用。
4. 控制台中没有错误

当我重新加载页面时，一切正常。

Answer 1

要解决这个问题，试试看！

constructor(private zone: NgZone) {
...
...
this.zone.run(() => {
this._router.navigate(['/dashboard']);
});

参考：Angular 2 ngOnInit不叫