2016-03-11 4 views
16

Я создаю приложение Angular 2 с версией бета-версии.8.
В этом приложении у меня есть компонент, который реализует OnInit.
В этом компоненте у меня есть функция ngOnInit, но функция ngOnInit никогда не вызывается.Угловой 2 ngOnInit не называется

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

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

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

маршрутизации приложения:

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

Существует проверка, чтобы увидеть, если пользователь уже вошел в систему внутри LoginComponent и RegisterComponent.
Если пользователь вошел в систему, компоненты перенаправляются на Обзор с использованием: router.navigate(['Overview']).
Если я использую маршрут обзора по умолчанию, я вижу ngOnInit внутри консоли.
Так что я перенаправляю свою страницу, кажется, проблема.
Как перенаправить на страницу Обзор и вызвать функцию ngOnInit?

И RegisterComponent и LoginComponent использование

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

Browser представляет собой класс, в котором я хранить браузера специальный код. Это функция gotoMain:

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

this._browser.main это просто строка в этом случае «Обзор».

+0

Вы удостоверились '' OverviewComponent работает? Если да, то даже если вы не импортировать 'OnInit' и реализует' OnInit', 'ngOnInit' будет работать. – micronyks

+0

@micronyks Я добавил сообщение message: string = 'test'' в OverviewComponent и попытался отобразить его в представлении с помощью '{{message}}' и он работал. – VincentKen

+0

Oh! В этом случае мне нужно увидеть ваш код Хорошо, просто попробуйте удалить то, что я предложил, и посмотрим, работает ли он! – micronyks

ответ

34

Я предполагаю, что это проблема зоны.

Вводят NgZone (импорт из angular2/core

constructor(private zone:NgZone) {} 

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

Он работает спасибо @ Günter. что делает NgZone, чтобы сделать эту работу? – VincentKen

+7

Угловой запускает свой код в исправленной зоне, где 'addEventListener()', 'setTimeout()' и другие асинхронные API-интерфейсы исправлены, чтобы уведомить «Угловое», когда произошло асинхронное действие с повторным обнаружением изменений. Это делает обнаружение изменений довольно эффективным. Когда вызывается код, который каким-то образом обходит зону Angulars, обнаружение изменения углов не влечет. Если метод (даже один из углового компонента или аналогичный) вызывается из кода, который был вызван вне зоны углов, все выйдет за пределы зоны, пока это событие полностью обработано. С 'zone.run (...)' вы принудительно завершаете выполнение в зону углов. –

+0

Чтобы обойти это для 'addEventListener()', вы можете использовать 'BrowserDomAdapter', и он сделает это за вас. – Philip

Смежные вопросы