ngOnInit被调用了两次，可能是路由问题

Question

最初，我的页面通过路由加载数据。所以通常路由是localhoat:8000bProject。

页面上有一个下拉菜单，当我选择值时，我希望url被该值更改。它应该喜欢localhost:8000CaseId5。

路线代码。

const routes: Routes = [
{path: 'bProject', component: BProjectComponent},
{path: 'bProject/CaseId/:id, component: BProjectComponent}
];

下拉选择值方法为

private loadCaseData() {
const url = 'app/bProject/CaseId';
this.router.navigate([url, this.caseId]);
}

代码确实有效，但是我发现ngOnInit被调用了两次。我怀疑是否有两个组件实例在运行，因为在路由中，我使用了两次相同的组件。

使用导航正确吗？

Answer 1

问题是您要重新加载两次相同的组件：BProjectComponent。

第一个：加载项目组件时。

第二：在选择中拾取图元后，导航到一条路线，该路线将带您到达添加了路径的同一构件。

我建议您将CaseId作为"/b项目"路径的子级。

const routes: Routes = [
{path: 'bProject', component: BProjectComponent, children: [
{path: 'CaseId/:id, component: CaseComponent}
]}
];

然后你下拉选择值的方法应该是：

private loadCaseData() {
this.router.navigate([./CaseId, this.caseId]);
}

Answer 2

原来我创建了一个全局服务来存储数据。当第二个实例出现时，我从服务中检索数据，而不是从数据库中重新加载数据。

这听起来很脏，但我必须这么做。