Крючки жизненного цикла Angular-cli не вызываются при навигации

Question

В настоящее время я работаю с проектом angular-cli. Когда я загружаю компонент после навигации по router.navigate запускается конструктор компонента, однако хуки ngOnInit и ngAfterViewInit не активируются.

Маршрут, по которому я иду /login и я направляюсь к /controlpanel

Я прочитал https://github.com/angular/angular/issues/8012, но, к сожалению, это не помогло, так как в настоящее время полифилы не влияют на мое приложение.

Соответствующие фрагменты кода ниже:

Вызов 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 Google - это то, что мешает запуску 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.

Надеюсь, это поможет.