运维开发网
广告位招商联系QQ:123077622
 
广告位招商联系QQ:123077622

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

运维开发网 https://www.qedev.com 2020-06-17 12:59 出处:网络 作者:运维开发网整理
我已经实现了以下控制台输出,以跟踪执行的内容和不执行的内容. / dataList下的页面代码. export class DataList implements OnInit { constructor(private service: DataService) { console.log("constructed"); } ngOnInit() { conso
我已经实现了以下控制台输出,以跟踪执行的内容和不执行的内容. / 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,考虑到实现的接口,但显然,我错了(并且主要是困惑).

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

const routes: Routes = [
  { path: "", component: StartComponent },
  { path: "dataList", component: DataListComponent },
  { path: "dataElement/:id", component: DataElementComponent },
  ...
  { path: "**", component: StartComponent }
];
在我有一些令人难以置信的天才罢工之后(a.k.a.哑巴运气),我看到了一些关于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 place的代码示例.这是不了解发生了什么的最短路径,我完全讨厌它,所以如果有人想提供关于这个主题的一些指示,我会欣喜若狂(同样,如果这些解释了这样一个简单的问题如何仍然会导致版本5出现问题,那就更加棒了.

扫码领视频副本.gif

0

精彩评论

暂无评论...
验证码 换一张
取 消