ngOnInit被两次​​调用，也许是路由问题

Question

最初，我的页面按路线加载数据。因此通常路线为localhoat:8000\bProject。

在页面上有一个下拉菜单，当我选择该值时，我希望通过该值更改url。它应该喜欢localhost:8000\CaseId\5。

路线代码。

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。

首先：当您加载项目组件时。

第二个：在选择中选择一个元素后，导航到一条路径，该路径将您带到具有添加路径的相同Component。

我建议您将CaseId用作'/ bProject'路径的子代。

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

然后，您下拉选择值方法应为：

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

Answer 2

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

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