Angular 路由到组件后未触发 OnInit

Question

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

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

然而，在这种情况下，组件被加载并调用了构造函数，但是实现的 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))
        });

Angular 路由到组件后未触发 OnInit

Angular OnInit not triggered after routing to component

angular-routing

angular