使用不同数据加载相同组件时不会调用 ngOnInit [英] ngOnInit not called when same component is loaded with different data

问题描述

我有一个 angular 2 应用程序，我像其他人一样使用路由器在视图之间导航.以下是我对特定组件的路径的样子:

<代码>{路径:'home/view1/:viewID',组件:视图组件，孩子们: [{ path: 'pane/:paneId/section/:sectionId', 组件: SectionEditComponent },{ 路径:'**'，组件:ViewEditComponent }]},

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

路径1:pane/1/section/1
路径2:窗格/1/节/2

ViewComponent 模板:

 
<button (click)="loadPath(1)">Path1</button><button (click)="loadPath(2)">Path2</button><路由器插座></路由器插座>

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

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

解决方案

注入路由并订阅参数变化

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

I have an angular 2 app, and I use router to navigate between views, like everyone else. Here is how my path for a particular component look like:

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

Now, I have two buttons on the ViewComponent, to load SectionEditComponent for section1 and section2.

Path1: pane/1/section/1
Path2: pane/1/section/2

ViewComponent template:

   <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>

Now, when I navigate from Path1->Path2 or Path2->Path1 within same ViewComponent, the ngOnInit() is not called, thus not loading the new path, even though the url actually change according to the new section ID.

Is this known or expected behavior? Is there anything that I'm doing wrong?

解决方案

Inject the route and subscribe to parameters change

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

这篇关于使用不同数据加载相同组件时不会调用 ngOnInit的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！