Navigation events

כשאנחנו מבצעים מעבר בין קומפוננטות יש סדרה של אירועים שמתרחשים.

כדי לעקוב אחריהם נאפשר את 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;
        }
    })
}