כשאנחנו מבצעים מעבר בין קומפוננטות יש סדרה של אירועים שמתרחשים.
כדי לעקוב אחריהם נאפשר את tracing.
app-routing-module.ts
@NgModule({
imports: [RouterModule.forRoot(routes, {enableTracing: true})],
exports: [RouterModule],
})
עכשיו נוכל לראות ב-log את האירועים.
אנחנו יכולים להרשם לאירועים ולבצע פעולות כשהם עולים.
למשל להראות אייקון של טעינה כשהעמוד נטען ולהסיר אותו כשהעמוד עלה.
app.component.html
<div class="spinner" *ngIf="displayLoadingIndicator"></div>
צריך לשים את הגרפיקה של הספינר כמובן ב-css.
app.component.ts
constructor(private router: Router){}
displayLoadingIndicator = false;
ngOnInit(){
this.router.events.subscribe((routerEvent: Event) => {
if(routerEvent instanceOf NavigationStart){
this.displayLoadingIndicator = true;
}
if(routerEvent instanceOf NavigationEnd || routerEvent instanceOf NavigationCancel || routerEvent instanceOf NavigationError){
this.displayLoadingIndicator = false;
}
})
}