Angular 2 ngOnInit 未调用答案

【问题标题】：Angular 2 ngOnInit not calledAngular 2 ngOnInit 未调用
【发布时间】：2016-06-26 11:32:16
【问题描述】：

我正在构建一个带有 beta.8 版本的 Angular 2 应用程序。
在这个应用程序中，我有一个实现 OnInit 的组件。
在这个组件中，我有函数 ngOnInit，但从未调用过 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'])。
如果我默认使用 Overview 路由，我会在控制台内看到 ngOnInit。
所以我重定向页面的方式似乎是问题所在。
如何重定向到Overview页面并调用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 在这种情况下只是一个字符串 'Overview'。

【问题讨论】：

您确定OverviewComponent 有效吗？如果是，即使不导入OnInit 并实现OnInit，ngOnInit 也可以。
@micronyks 我在 OverviewComponent 中添加了一个 message: string = 'test' 并尝试使用 {{message}} 在视图中显示它，并且成功了。
哦！在这种情况下，我需要查看您的代码。好的。只需尝试删除我的建议，看看是否有效！
@Günter 在RegisterComponent 和LoginComponent 内部我有一个工作ngOnInit() 在其中检查用户是否已登录。如果用户已登录，我使用this._router.navigate['Overview']
这没有多大帮助。调用this._router.navigate['Overview'] 的代码在哪里。在构造函数中，来自与服务器通信的库的回调，...？

标签： angular typescript ngoninit

【解决方案1】：

我猜是区域问题。

注入NgZone（从angular2/core导入

constructor(private zone:NgZone) {}

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

【讨论】：

它工作谢谢@Günter。 NgZone 做了什么来完成这项工作？
Angular 在一个修补区域运行它的代码，addEventListener()、setTimeout() 和其他异步 API 被修补，以便在异步操作发生时通知 Angular 以重新运行更改检测。这使得变更检测非常有效。当调用以某种方式绕过 Angulars 区域的代码时，Angulars 更改检测不会启动。如果从在 Angulars 区域之外调用的代码调用方法（甚至是来自 Angular 组件或类似的方法），则一切都在该区域之外运行，直到这事件已完全处理。使用zone.run(...)，您可以强制执行回到 Angulars 区域。
要为addEventListener() 解决此问题，您可以使用BrowserDomAdapter，它会为您完成此操作。