当同一个组件加载不同的数据时，不会调用 ngOnInit

Posted 2023-02-22

【中文标题】当同一个组件加载不同的数据时，不会调用 ngOnInit

【英文标题】：ngOnInit not called when same component is loaded with different data

【发布时间】：2017-02-19 03:29:39

【问题描述】：

我有一个 Angular 2 应用程序，我使用路由器在视图之间导航，就像其他人一样。这是我的特定组件路径的样子：

    path: 'home/view1/:viewID',
    component: ViewComponent,
    children: [
         path: 'pane/:paneId/section/:sectionId', component: SectionEditComponent ,
         path: '**', component: ViewEditComponent 
    ]
,

现在，我在 ViewComponent 上有两个按钮，用于为 section1 和 section2 加载 SectionEditComponent。

路径 1：pane/1/section/1 路径2：pane/1/section/2

ViewComponent 模板：

   <div class="col-md-8" style="background-color: white; height: 100%">
       <button (click)="loadPath(1)">Path1</button>
       <button (click)="loadPath(2)">Path2</button>
       <router-outlet></router-outlet>
   </div>

现在，当我在同一个 ViewComponent 中从 Path1->Path2 或 Path2->Path1 导航时，不会调用 ngOnInit()，因此不会加载新路径，即使 url 实际上会根据新的部分 ID 发生变化。

这是已知的还是预期的行为？有什么我做错了吗？

【参考方案1】：

注入路由并订阅参数变化

constructor(route:ActivatedRoute) 
  route.params.forEach(params => 
    myInit(params['paramId']);
  );

【讨论】：

这是好的做法吗？你不应该subscribe 给参数还是会给出同样的问题？你知道为什么onSameUrlNavigation: 'reload' 似乎也没有解决它吗？

【参考方案2】：

只是想补充一点，如果您使用路由解析器在组件加载之前获取数据，那么您可以将以下代码放入组件的 ngOnInit 方法中：

ngOnInit()
    this.activatedRoute.data.subscribe(data => 
         initData(data['mydata']);
    );


initData(data)
    // process new data

现在，每当您的解析器更新路由的解析数据时，您的组件模型都会更新并显示新数据。

【参考方案3】：

对于组件的同一个实例，ngOnInit() 只被调用一次。

【讨论】：

谢谢，那么如何实现reload呢？ （或者如果每次都调用任何其他方法）

但是你到底想达到什么目的呢？

其实我有一个基于路由参数的组件初始化逻辑。 @Günter Zöchbauer 的答案正是我想要的 (***.com/a/39962929/6950218)

【参考方案4】：

我遇到了类似的问题，在路由更改时未调用 ngOnInit。 我将代码移到 ngAfterViewInit() 并成功了。

【讨论】：

我在执行此操作时收到了Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.。此外，在重用组件时它没有触发两次，所以我不确定它是否有效。

@TetraDev 这可能会对您有所帮助：***.com/questions/34364880/…