在Angular中无法路由到具有不同路由的相同组件

时间:2020-08-05 19:00:43

标签: angular angular2-routing

我有一个角度项目,其中有一个导航栏,可以导航到不同的组件。导航栏中的两个导航导航到相同的组件,但具有不同的参数。当我尝试从导航栏导航到这两种导航中的任何一种时,它都可以正常工作。

但是,如果我尝试从这些导航之一导航到具有相同路线和不同参数的其他导航,则它将无法正常工作。

我的ngOnit函数

ngOnInit(): void {
        this.configId = this.route.snapshot.paramMap.get('id')
        this.getConfigurations();
    }

看着similar question的答案,我将代码更改为

    ngOnInit(): void {
        this.sub = this.route.params.subscribe(params => {
            this.configId = params['id']
        })
        this.getConfigurations();
    }

    ngOnDestroy(): void{
        this.sub.unsubscribe()
    }

但我仍然看到相同的行为。

编辑

路由配置

{ path: 'admin/program/:id', component: ConfigurationView , canActivate: [AuthGuard], data: {
        breadcrumb: [
            {
              label: 'Admin',
              url: ''
            },
            {
                label: 'Program ',
                url: ''
            }
          ]
        }
    },

1 个答案:

答案 0 :(得分:1)

ngOnInit仅在将组件插入DOM树时调用。

当您在具有相同id的同一路径中导航时,Angular不会重新渲染组件。(因此不会再次调用ngOnInit,并且您无法在{{1 }})

相反,您应该像以前一样观察参数的变化,但是您需要将id移到订阅回调中。

ngOnInit