导航时未调用 Angular-cli 生命周期挂钩答案

【问题标题】：Angular-cli Lifecycle Hooks Not Being Called on Navigation导航时未调用 Angular-cli 生命周期挂钩
【发布时间】：2017-12-25 13:51:38
【问题描述】：

我目前正在处理一个 angular-cli 项目。但是，当我在通过router.navigate 导航后加载组件时，组件构造函数会运行，但是 ngOnInit 和 ngAfterViewInit 挂钩不会激活。

我所在的路线是/login，我正在导航到/controlpanel

我已经阅读了https://github.com/angular/angular/issues/8012，但不幸的是这并没有帮助，因为 polyfills 目前并没有影响我的应用程序。

相关代码如下：

router.navigate 调用：

public attachSignin(element) {
    this.auth2.attachClickHandler(element, {}, (googleUser) => {
        this.googleAuth.auth2 = this.auth2;
        this.googleAuth.userProfile = googleUser.getBasicProfile();
        this.router.navigate(['/controlpanel']);
    });
  }

我的路由设置（来自较低的模块）：

const dataRoutes: Routes = [
  { path: 'controlpanel', component: DataHomeComponent },
]
@NgModule({
  declarations: [
    DataHomeComponent,
    GravityMapComponent
  ],
  imports: [
    GlobalModule,
    RouterModule.forChild(dataRoutes)
  ],
  exports: [RouterModule]
})
export class DataModule { }

主应用路由文件：

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

关于模块设置需要注意的一点是子模块中声明了路由。然后将这些子模块导入主模块。主路由文件只是将 RouterModule.forRoot() 声明为 root - 我已尽力遵循以下架构：https://angular.io/guide/http

要调用的组件：

import { Component, OnInit } from '@angular/core'
import gapi from 'gapi'

@Component({
  selector: 'data-home-component',
  templateUrl: './data-home.component.html',
  styleUrls: ['./data-home.component.css'],
})
export class DataHomeComponent implements OnInit {
  public ngOnInit() {
    console.log("oninit")
  }

  public signOut() {
    gapi.auth2.signOut().then(function () {
        console.log('User signed out.');
    });
  }
}

更新：当我使用 HashLocationStrategy 时，组件生命周期挂钩运行 - 有人知道是什么原因造成的吗？

更新：当我删除注入的服务时，ngOnInit 挂钩在使用 PathLocationStrategy 时运行。如果组件只是接收单例服务，为什么会作为可注入组件返回？

更新：我将 DataHomeComponent 隔离为其最基本的形式 - 似乎 declare const gapi: any; 使用谷歌的 api 是阻止 ngOnInit 运行的原因。关于在哪里声明该变量的任何建议？

【问题讨论】：

阅读：angular.io/guide/lifecycle-hooks。您必须正确实施生命周期挂钩才能使其正常工作。只是将它们添加到没有正确 implements 的组件中是行不通的。
@R.Richards 我的代码中所有正确位置都有implements 标签——还有什么想法吗？我将在上面发布更新的代码
我无法重现这种行为。当我使用路由器导航时，生命周期挂钩会触发。
有趣，您是在将登录附加到 DOM 节点后进行导航吗？

标签： angular-cli google-signin lifecycle angular-routing google-api-js-client

【解决方案1】：

您是否尝试过以下操作？

  import { NgZone } from '@angular/core';

  constructor (
    ...
    private zone: NgZone
  ){}

  this.auth2.attachClickHandler(element, {}, (googleUser) => {
      this.googleAuth.auth2 = this.auth2;
      this.googleAuth.userProfile = googleUser.getBasicProfile();
      this.zone.run(() => { 
          this.router.navigate(['/controlpanel']);
      });
  });

我在调用我的服务的 gapi.auth2.getAuthInstance().signIn() 承诺处理程序中遇到了一个非常相似的问题。路由完成后，我的任何 ngOnInit 方法都不会在组件中被调用。通过该区域发送它可以重新进入 Angular 世界，如此处所述https://angular.io/api/core/NgZone#run。

希望它有所帮助。

【讨论】：