从子组件（Angular）导航时更新父组件

Question

从子组件路由时，我在更新父组件时遇到了一些问题。我通过研究发现了这么多，是 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)，用户可以在其中更新/删除该项目。

子组件中的方法，当用户删除项目时，用户被路由到父组件：

deleteItem(item: any) {
    // some code... 
    this._router.navigate(['dashboard']); 
}

所以一切正常，除了项目数组没有更新，因为 ngOnInit 只被调用一次。

所以当用户从子组件DetailComponent 被路由回DashboardComponent 时，我想运行getSomething1() 和getSomething2() 方法。

感谢您的帮助！

Answer 1

解决这种情况的方法是使用主题。

在 DashboardComponent 中你可以声明一个主题：

public static returned: Subject<any> = new Subject();

并订阅它：

constructor() {
      DashboardComponent.returned.subscribe(res => {
         this.getSomething1(); // this populates an array
         this.getSomething2();
      });
   }

在DetailComponent中，删除item后，在subject中调用next：

deleteItem(item: any) {
    // some code... 
    DashboardComponent.returned.next(false);
    this._router.navigate(['dashboard']); 
}