2016-03-11 68 views
16

Sto costruendo un'app Angular 2 con la versione beta.8.
In questa app ho un componente che implementa OnInit.
In questo componente ho la funzione ngOnInit, ma la funzione ngOnInit non viene mai chiamata.Angular 2 ngOnInit non chiamato

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

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

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

Il Routing del app:

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

c'è un controllo per vedere se l'utente è già connesso all'interno della LoginComponent e RegisterComponent.
Se l'utente ha effettuato l'accesso, i componenti reindirizzano a Panoramica utilizzando: router.navigate(['Overview']).
Se utilizzo il percorso Panoramica come predefinito, vedo ngOnInit all'interno della console.
Quindi il modo in cui reindirizzo la mia pagina sembra essere il problema.
Come si può reindirizzare alla pagina Panoramica e chiamare la funzione ngOnInit?

Sia il RegisterComponent e l'uso LoginComponent

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

Browser è una classe in cui posso conservare codice specifico browser. Questa è la funzione gotoMain:

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

this._browser.main è solo una stringa in questo caso 'Panoramica'.

+0

Avete fatto in modo che '' OverviewComponent funziona? Se sì, anche se non si importa 'OnInit' e implementa' OnInit', 'ngOnInit' funzionerà. – micronyks

+0

@micronyks Ho aggiunto un 'message: string = 'test'' a OverviewComponent e ho provato a visualizzarlo nella vista con' {{message}} 'e ha funzionato .. – VincentKen

+0

Oh! In tal caso ho bisogno di vedere il tuo codice Okay, prova a rimuovere quello che ho suggerito e vedi se funziona! – micronyks

risposta

34

Immagino sia un problema di zona.

Inject NgZone (importazione da angular2/core

constructor(private zone:NgZone) {} 

this._browser.getStorageValue('api_key', api_key => { 
    if (api_key) { 
    this.zone.run(() => this._browser.gotoMain()); 
    } 
}) 
+0

Funziona grazie @ Günter. cosa fa NgZone per farlo funzionare? – VincentKen

+7

Angular esegue il codice in una zona con patch dove 'addEventListener()', 'setTimeout()', e altre API asincrone sono corretti per notificare Angular quando è avvenuta un'azione asincrona per rieseguire il rilevamento delle modifiche. Questo rende il rilevamento dei cambiamenti abbastanza efficiente. Quando viene chiamato il codice che in qualche modo circonda la zona degli angolani, il rilevamento della modifica degli angolari non entra in gioco. Se un metodo (anche uno da un componente angolare o simile) viene chiamato dal codice invocato fuori dalla zona Angulars, tutto viene eseguito all'esterno della zona fino a quando l'evento è completamente elaborato. Con 'zone.run (...)' forzate l'esecuzione nella zona Angulars. –

+0

Per aggirare questo problema per 'addEventListener()', puoi usare 'BrowserDomAdapter' e lo farà per te. – Philip