queryParam 不适用于 angular 路由

queryParam not working right with angular routing

我目前有一个路由器,其路径设置如下:

{path: "application/:id", component: ApplicationComponent}

我使用 ngFor 循环生成了 link 的菜单。它使用索引生成动态 routerLink:

routerLink="application/{{index}}"

单击后,它会转到正确的 URL 并使用我的 ApplicationComponent 的 ngOnInit 方法获取 url 中的索引,并将特定对象从单独的数组中拉出 class.

但是 它仅适用于您点击的第一个 link。如果我单击 link 1,它会使用对象 1 的数据正确加载页面。但是,当我单击 link 2 时,它会移动到 url 中的 application/2,但会保留对象 1 的信息。如果我刷新页面并单击 link 2,则会显示对象 2 的信息,因此我知道它是从数组中正确提取的。

我怀疑一旦单击任何 links,ApplicationComponent 使用 ngOnInit 方法创建组件,然后如果单击另一个,则不会调用此方法,因此变量不会更新。

我该如何解决这个问题?我需要应用程序组件知道我已经前往一个新的子link,以便它可以再次调用 ngOnInit

ngOnInit 仅在加载组件时调用一次。因此,如果您导航到 application/1,则会调用 ngOnInit。如果您随后导航到 application/2,则不会再次调用 ngOnInit,因为该组件已加载。您需要使用 ActivatedRoute 中的 paramMap 之类的东西来检测参数何时更改。

ngOnInit(){
    this.activatedRoute.paramMap.subscribe(paramMap => {
        let id = paramMap.get('id'); // id gets updated whenever parameters change

        // add or call any code that needs to re-run when a parameter changes here
    });
}