queryParam无法正确处理角度路由

时间:2018-01-18 21:55:26

标签: javascript html angular angular-ui-router query-parameters

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

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

我使用ngFor循环生成一个链接菜单。它使用索引生成以下的动态routerLink:

routerLink="application/{{index}}"

点击后,它会移动到正确的URL,并使用我的ApplicationComponent的ngOnInit方法获取网址中的索引,并从单独的类中的数组中提取特定对象。

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

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

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

1 个答案:

答案 0 :(得分:0)

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

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