Question

我正在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,
        },

    ]
}

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

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

Answer 1

也许您可以让父组件侦听路线更改并相应地更新数据：

export class MyComponent {
    homepageData: any;

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

Answer 2

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

{imap.mydomain.com:993/imap/ssl}

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

2 个答案: