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

【问题标题】：ngOnInit was called twice perhaps route issuengOnInit 被调用了两次，可能是路由问题
【发布时间】：2019-10-29 23:14:12
【问题描述】：

最初我的页面通过路由加载数据。所以通常路由是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 被调用了两次。我怀疑有两个组件实例在运行，因为在路由中，我使用了两次相同的组件。

使用导航对吗？

【问题讨论】：

我认为取消 ngOnInit() 是没有意义的，因为这是 Angular 生命周期钩子的一部分。您的路线的一个问题是您应该将第二条路线作为第一条路线的子路线。
我不关注你。请解释一下。
I doubt that there were two component instance running...。您的观察表明这是不正确的。该组件肯定有两个实例，每个路由一个。当您更改路由时，第一个被销毁并初始化一个新实例。
好的，那怎么解决呢？
你怎么有信心ngOnInit 打了两次电话？有什么线索吗？

标签： angular

【解决方案1】：

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

首先：加载项目组件时。

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

我建议您将 CaseId 设为“/bProject”路径的子项。

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

那么你下拉选择值的方法应该是：

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

【讨论】：

问题是我是否以子组件的方式进行。有很多重复的代码。我应该创建新组件吗？很多工作。导航的 Web 界面相同。区别只是控件中的值。
不应该有重复的代码。在您导航到子路由的那一刻，父级是相同的并且他没有重新加载，它只会加载内的子元素。
我的意思是我应该为子组件重写html吗？它们是相同的并且有很多代码。我能不能让它做脏活，打两次电话，很好。添加了一些逻辑以避免任何加载延迟？
如果 caseId 选择了它非常重要但您在路线上不需要它，您可以将其保存在 BehaviorSubject 中。另一方面，如果您需要路线中的 caseId 是，您应该进行重构。也许你可以避免重构并做一些肮脏的工作，但糟糕的代码是最难维护的。
我们可以使用查询参数而不是因为我不熟悉 BehaviorSubject 吗？

【解决方案2】：

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

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

【讨论】：