路由到具有不同路由的同一组件在 Angular 中不起作用

Question

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

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

我的 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: ''
            }
          ]
        }
    },

Answer 1

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

当您使用不同的 id 在同一路径中导航时，Angular 不会 re-render 组件。（所以 ngOnInit 不会再次调用，您无法获得 id 在 ngOnInit)

里面

相反，您应该观察参数的变化，就像您所做的一样，但是您需要将 getConfiguration() 移到订阅回调中。

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

路由到具有不同路由的同一组件在 Angular 中不起作用

Routing to same component with different routing is not working in Angular

angular

angular2-routing

编辑