Skip to main content

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;
}
})
}