Question

我目前正在使用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时，组件生命周期挂钩运行 - 有没有人知道是什么原因造成的？

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

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

Answer 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所述。

希望它有所帮助。

Angular-cli生命周期挂钩未在导航上调用

1 个答案: