Question

问题是当我在两个相似的URL之间导航时，我的组件没有重新绘制。例如，当用户查看http://localhost:8088/#/app/route/study/6/detail然后导航到http://localhost:8088/#/app/route/study/7/detail时，StudyComponent会正确重新加载。但是，DetailComponent 未重新加载。我认为原因是细节的params没有改变，因此Angular认为不重新加载是可以的。但在我的情况下，细节取决于父参数。

我该如何解决这个问题？

我的路线：

const studyRoutes: Routes = [
    {
        path: '', component: RouteComponent,
        children:  [
            {path: 'study/:id', component: StudyComponent,
            children: [
                {path: 'detail', component: DetailComponent },
                {path: 'parts', component: PartsComponent }
            ]
        }
    ]
}
];

我的所有组件都是这样初始化的：

ngOnInit() {
    this.loader = this.route.params.subscribe(params => this.onLoad());
}

ngOnDestroy() {
    this.loader.unsubscribe();
}

当我在不同研究的详细信息之间导航时，onLoad中永远不会调用DetailComponent。

Answer 1

要对:id级DetailComponent参数的更改作出反应，您需要进行以下更改：

// detail.component.ts
ngOnInit() {
    this.loader = this.route.parent.params.subscribe(params => this.onLoad());
}

这是因为您的路径中的路径detail不会定义:id参数，它的父路径就是这样。因此，更改将反映在路由器状态树中的该级别。

未激活订阅ActivatedRoute.params

1 个答案: