Обновить родительский компонент при переходе от дочернего компонента

Question

Я загружаю некоторые данные API бэкэнда на домашней странице в ngOnInit()

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, мой домашний компонент не обновляется, может быть потому, что ngOnInit() вызывается один раз. Как вызвать это ngOnit() каждый раз, когда я перехожу к дому. Я пробовал с ngAfterViewInit(), но он также вызывается только один раз.

Я обнаружил похожую проблему здесь . Но здесь происходит навигация после вызова функции, что не в моем случае. В моем случае много дочерних компонентов, и я ищу одно решениеэто может соответствовать всем. Спасибо

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 , демонстрирующий возможную реализацию.

@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++;
    }
}