从子组件导航时刷新父组件答案

【问题标题】：Refresh Parent Component While navigating From Child Component从子组件导航时刷新父组件
【发布时间】：2020-01-31 10:52:05
【问题描述】：

我正在ngOnInit()的主页上加载一些后端api数据

export class MyComponent{
 homepagedata:any; // displayed on the html 

ngOnInit() {
   this.homepagedata=// calling service 
}

}

这是我的路线

{
    path: 'home',
    component: HomeComponent,
    children: [


        {  
            path: 'dashboard/:userid', // 
            component: DashboardComponent,
        },

    ]
}

所以当我导航到仪表板，然后再次导航到主页时，我的主页组件没有刷新，可能是因为 ngOnInit() 被调用一次。每次导航到主页时如何调用 ngOnit()。我尝试使用ngAfterViewInit()，但它也只调用过一次。

我发现了一个类似的问题here。但是这里是在函数调用之后导航，这不是我的情况。我的情况下有很多子组件，我正在寻找一种适合所有人的解决方案。谢谢

【问题讨论】：

标签： javascript angular

【解决方案1】：

也许你可以让你的父组件监听路由变化并相应地更新你的数据：

export class MyComponent {
    homepageData: any;

    constructor(private router: Router) {
       this.router.events.subscribe(event => {
         if (event instanceof NavigationEnd) {    
             // update this.homepageData
       });
     }
     ...
}

【讨论】：

那是一个纯粹的天才。我想我应该因为提出这样的问题而受到奖励：P。它在任何地方都没有。谢谢:)
确保在 ngOnDestroy 中取消订阅以防止内存泄漏。此外，这应该放入 ngOnInit。

【解决方案2】：

一种解决方案可能是监听与导航到您的主页相对应的路由器事件，并在发生时加载数据。
这是一个stackblitz，演示了一个可能的实现。

@Component({
    template: `
        <p>home page content (load count: {{loadCount}})</p>
        <hr>
        <p>child page:</p>
        <router-outlet></router-outlet>
    `,
})
export class HomeComponent
{
    loadCount = 0;

    constructor ( private router: Router )
    {
        // On router event...
        this.router.events
            // ...if event is a navigation end and if target is home page...
            .pipe(filter(event =>
                event instanceof NavigationEnd && event.urlAfterRedirects === '/home',
            ))
            // ...load data.
            .subscribe(() => this.load());
    }

    private load ()
    {
        // Simulate data loading by incrementing a counter.
        console.log('load home data');
        this.loadCount++;
    }
}

【讨论】：