路由到组件后未触发 Angular OnInit

Question

我刚刚遇到了一个非常奇怪的问题，我以前从未遇到过 Angular 路由器。

我正在使用leaflet plugin 来显示一些与我的基础数据集相关的地图标记。为了获得有关这些地方的更多详细信息，单击其中一个标记应通过在 url (detail/:id) 中传递相应的数据集 id 将用户路由到另一个名为 detail 的组件。

但是，在这种情况下，组件被加载并调用了构造函数，但是实现的OnInit函数并没有像往常一样被触发。那里什么都没有发生。

所有这些也可以在这个 stackblitz example 中看到。

这是当前 Angular (6.0.5) 版本中的已知错误吗？ 如果是这样，是否有解决方法？

提前致谢

Answer 1

单击标记会在 NgZone 之外运行逻辑，从而防止发生更改检测。您需要手动运行它。 将NgZone 注入MapComponent

export class MapComponent {
...
  constructor(private router: Router, private ngZone: NgZone) {...}

那就换

 marker_label.on('click', (event: MouseEvent) => {
            const link = ['detail', id];
            this.router.navigate(link);
        });

到

marker_label.on('click', (event: MouseEvent) => {
            const link = ['detail', id];
            this.ngZone.run(() => this.router.navigate(link))
        });