Chcę aby zamiast <router-outlet> wyświetlał się napis Loading... dopóki komponent dla podstrony nie zostanie załadowany. W AppComponent mam następujący kod html:
Kod .ts:
export class AppComponent {
loading = true;
constructor(private router: Router) {
router.events.subscribe((event: RouterEvent) => {
this.navigationInterceptor(event);
});
}
navigationInterceptor(event: RouterEvent): void {
if (event instanceof NavigationStart)
this.loading = true;
else if (event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError)
this.loading = false;
}
}
Mam komponent HomeComponent, który odpowiedzialny jest za stronę główną (<router-outlet>). W metodzie ngOnInit wczytuje dane ze serwera. Problem jest taki, że zmienna loading w AppComponent zmienia się na false zaraz po zakończeniu nawigowania, pomimo iż komponent Home nie jest jeszcze gotowy bo nadal pobiera dane ze serwera. Jak rozwiązać ten problem? Powinienem zgłaszać event powiadamiający komponent App o zakończeniu wczytywania? Nie podoba mi się to rozwiązanie bo musiałbym tak zrobić dla każdego komponentu obsługującą daną podstronę.