Question

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

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

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

路径1：窗格/ 1 /部分/ 1
路径2：窗格/ 1 /部分/ 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-＆gt; Path2或Path2-＆gt; Path1导航时，不会调用ngOnInit（），因此不会加载新路径，即使url实际上根据新部分更改ID。

这是已知的还是预期的行为？我有什么不对的吗？

Answer 1

注入路线并订阅参数更改

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

Answer 2

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

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

initData(data){
    // process new data
}

现在，无论何时解析器更新路径的已解析数据，组件的模型都会更新并显示新数据。

Answer 3

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

Answer 4

我遇到类似的问题，在路线更改时没有调用ngOnInit。我将代码移动到 ngAfterViewInit（），然后就可以了。

当相同组件加载不同数据时，不会调用ngOnInit

4 个答案: