当以编程方式路由回页面时,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");

但是,当我从此页面导航到详细页面(使用/ dataElement/12345之类的URL ,其中12345是ID)时,它不显示已启动(仅构造),然后返回到执行导航的页面/ dataList通过上面显示的URL.(如果我然后点击F5,我会看到构造和inited,但是.)

我认为甚至不可能进入构造函数而不进入ngOnInit,给定实现的接口,但显然,我错了(并且也非常困惑).

我可以做的最好的诊断是,当从子路径路径导航时,不会调用初始化.但它对我来说似乎很奇怪,所以我怀疑我没有正确诊断它.谷歌搜索没有产生任何我认为充分相关的东西(像这样或者这样).路由就像这样.

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

Answer 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");
    });
  }
}

现在,我不知道它做了什么,甚至不知道如何或为什么.我只是从这个地方复制了一个代码示例,如本回复中所述.这是不了解正在发生的事情的最短途径而且我完全讨厌它,所以如果有人想提供关于这个主题的一些指示,我会欣喜若狂(同样,如果这些解释了这样一个简单的问题如何仍然会导致问题)版本5,这将更加棒极了.