在从子组件路由时更新父组件时遇到了一些问题。我通过研究得到的结论是,ngOnInit只被调用一次,但是如何解决这个问题呢?我尝试过不同的生命周期钩子,但要么我还没能正确使用它们,要么我根本不应该使用它们!有人可以帮忙吗?谢谢!
我的路线:
{
path: 'dashboard',
component: DashboardComponent,
children: [
{
// when user is on dashboard component, no child component shown
path: '',
},
{ // detail component
path: ':table/:id', //
component: DetailComponent,
},
//some more child routes and components...
]
}
仪表板组件(父级)中的ngOnInit
ngOnInit() {
this.getSomething1(); // this populates an array
this.getSomething2(); // this populates an array
}
当用户从上面的一个数组中选择一个项目时,用户将被路由到该项目的详细信息页面(DetailComponent),用户可以在其中更新/删除该项目。
子组件中的方法,当用户删除项目时,用户被路由到parentcomponent:
deleteItem(item: any) {
// some code...
this._router.navigate(['dashboard']);
}
所以一切正常,除了项目数组没有得到更新,因为ngOnInit只被调用一次。
因此,当用户从子组件getSomething1()
路由回getSomething2()
时,我希望运行方法DashboardComponent
和DetailComponent
。
感谢您的帮助!
答案 0 :(得分:3)
这种情况的解决方法是使用主题。
在DashboardComponent中,您可以声明主题:
public static returned: Subject<any> = new Subject();
订阅它:
constructor() {
DashboardComponent.returned.subscribe(res => {
this.getSomething1(); // this populates an array
this.getSomething2();
});
}
在DetailComponent中,删除项目后,在主题中调用next:
deleteItem(item: any) {
// some code...
DashboardComponent.returned.next(false);
this._router.navigate(['dashboard']);
}