以编程方式路由回页面时，Angular 不会调用 ngOnInit答案

【问题标题】：Angular doesn't invoke ngOnInit when programatically routing back to a page以编程方式路由回页面时，Angular 不会调用 ngOnInit
【发布时间】：2018-06-17 19:38:17
【问题描述】：

我已经实现了以下控制台输出来跟踪执行的内容和未执行的内容。 /dataList 下的页面代码。

export class DataList implements OnInit {

  constructor(private service: DataService) { 
    console.log("constructed");
  }

  ngOnInit() {
    console.log("inited");
    ...
  }

}

现在，当通过输入 URL 访问页面时，它可以在控制台中同时提供输出（即 constructed 和 inited）。 > 以及使用从另一个页面路由访问页面时，如下所示。

this.router.navigateByUrl("/dataList");

但是，当我从该页面导航到详细页面（使用类似 /dataElement/12345 的 URL）时，它不显示 initied（仅 constructed） ，其中 12345 是一个 ID），然后返回到执行上述 URL 导航的页面 /dataList。（如果我然后按 F5，我会同时看到 constructed 和 inited。）

考虑到已实现的接口，我认为即使不进入ngOnInit 也无法进入构造函数，但显然我错了（而且也很困惑）。

我能做的最好的诊断是，从子路径的路由导航时，不会调用初始化。但这对我来说似乎很奇怪，所以我怀疑我也没有正确诊断它。谷歌搜索没有产生任何我认为足够相关的东西（like this 或this）。而且路由是这样的。

const routes: Routes = [
  { path: "", component: StartComponent },
  { path: "dataList", component: DataListComponent },
  { path: "dataElement/:id", component: DataElementComponent },
  ...
  { path: "**", component: StartComponent }
];

【问题讨论】：

你在不同的浏览器中看到这种行为吗？
@ConnorsFan 是的，在 Cr 和 FF 中是一致的。懒得在蹩脚的地方测试它。
This issue 报告了类似的问题（2016 年），发现库的导入顺序可能有一些影响。您可以检查是否在zone.js 之后导入了某些库（例如在 vendor.ts 中）并更改顺序以查看是否有所不同。

标签： angular typescript routing

【解决方案1】：

在我获得了一些令人难以置信的天才（又名愚蠢的运气）之后，我看到了一些关于 Angular 5（以及一些 4s）中的错误。显然，杀死这个问题的魔法是这样的。

import { NgZone, ... } from "@angular/core";

export class DataElement implements OnInit {

  constructor(private zone: NgZone, ... ) { ... }

  shaboo() {
    ...
    this.zone.run(() => {
      this.router.navigateByUrl("/dataList");
    });
  }
}

现在，我不知道它做了什么，更不知道如何或为什么。我只是从this place 复制了一个代码示例，如this reply 中所述。这是不理解发生了什么的最短路径，我完全讨厌它，所以如果有人想提供一些关于这个主题的指示，我会欣喜若狂（另外，如果这些解释了这样一个简单的问题如何仍然会导致问题第 5 版，那就更棒了）。

【讨论】：