web-dev-qa-db-fra.com

Angular 2 ngOnInit non appelé

Je construis une application Angular 2 avec la version beta.8.
Dans cette application, j'ai un composant qui implémente OnInit.
Dans ce composant j'ai la fonction ngOnInit, mais la fonction ngOnInit n'est jamais appelée.

import { Component, OnInit } from 'angular2/core';

@Component({
  templateUrl: '/app/html/overview.html'
})

export class OverviewComponent implements OnInit {
  ngOnInit() {
    console.log('ngOnInit');
  }
}

Le routage de l'application:

@RouteConfig([
  {
    path: '/overview',
    name: 'Overview',
    component: OverviewComponent
  },
  {
    path: '/login',
    name: 'Login',
    component: LoginComponent
  },
  {
    path: '/register',
    name: 'Register',
    component: RegisterComponent,
    useAsDefault: true
  }
])

Une vérification est effectuée pour voir si l'utilisateur est déjà connecté à l'intérieur des composants LoginComponent et RegisterComponent.
Si l'utilisateur est connecté, les composants sont redirigés vers Vue d'ensemble à l'aide de: router.navigate(['Overview']).
Si j'utilise la route Overview par défaut, je vois ngOnInit dans la console.
Le problème est donc lié à la façon dont je redirige ma page.
Comment peut-on rediriger vers la page Overview et appeler la fonction ngOnInit?

La RegisterComponentet la LoginComponent utilisent 

ngOnInit() {
  this._browser.getStorageValue('api_key', api_key => {
    if (api_key) {
      this._browser.gotoMain();
    }
  })
}

Le navigateur est une classe dans laquelle je stocke le code spécifique au navigateur. Voici la fonction gotoMain:

gotoMain() {
  this._router.navigate([this._browser.main]);
}

this._browser.main est simplement une chaîne dans ce cas, "Vue d'ensemble".

angulartypescriptngoninit
22
VincentKen

Je suppose que c'est une question de zone.

Injecter NgZone (importer depuis angular2/core

constructor(private zone:NgZone) {}

this._browser.getStorageValue('api_key', api_key => {
  if (api_key) {
    this.zone.run(() => this._browser.gotoMain());
  }
})
55
Günter Zöchbauer

Les crochets Lifecycle, comme OnInit (), fonctionnent avec des directives et des composants. Ils ne fonctionnent pas avec d'autres types, comme un service. Cochez cette link pour plus

0
Junaid