Angular在以编程方式路由回页面时不调用ngOnInit

Question

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

export class DataList implements OnInit {

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

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

}

现在，当通过输入URL访问页面时，以及当使用从另一个页面的路由访问页面时，它在控制台中提供输出（即构造和初始化），如下所示。

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

但是，当我从这个页面导航到一个详细的页面（URL类似于/dataElement/12345，12345是一个ID），然后返回到页面/数据列表执行上面显示的URL导航时，它不会显示initied（仅构造）。（如果我然后点击F5，我可以看到构造和初始化。）

考虑到实现的接口，我甚至不认为不进入ngOnInit就可以进入构造函数，但显然，我错了（而且也很困惑）。

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

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

Answer 1

在我有了一些不可思议的天才之后（又称哑巴运气），我看到了Angular 5中的一个bug（还有一些4s）。显然，解决这个问题的魔法是这样的。

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

export class DataElement implements OnInit {

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

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

现在，我不知道它是做什么的，更不知道它是怎么做的，为什么。我只是从这个地方复制了一个代码示例，如本文所述。这是不理解正在发生的事情的最短路径，我非常讨厌它，所以如果有人想提供一些关于这个主题的建议，我会欣喜若狂（同样，如果这些解释了这样一个简单的问题如何在版本5中仍然会导致问题，那将更加可怕）。