[Angular] N things you might don't know about Angular Route

Prevent Partail Page display: By using Resolver:

@Injectable()
export class MovieResolver implements Resolve<IMovie> {

  constructor(private movieService: MovieService) { }

  resolve(route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<IMovie> {
    const id = route.paramMap.get('id');
    return this.movieService.getMovie(+id);
  }
}

providers: [
   MovieService,
   MovieResolver
]

{
   path: 'movies/:id',
   resolve: { movie: MovieResolver },
   component: MovieDetailComponent
},

ngOnInit(): void {
   this.movie = this.route.snapshot.data['movie'];
}

 

Display Loading spinner when switching page:

constructor(private router: Router) {
   router.events.subscribe((routerEvent: Event) => {
      this.checkRouterEvent(routerEvent);
   });
}


checkRouterEvent(routerEvent: Event): void {
   if (routerEvent instanceof NavigationStart) {
      this.loading = true;
   }

   if (routerEvent instanceof NavigationEnd ||
       routerEvent instanceof NavigationCancel ||
       routerEvent instanceof NavigationError) {
      this.loading = false;
   }
}

<span class="glyphicon glyphicon-refresh glyphicon-spin spinner" 
      *ngIf="loading"></span>
<router-outlet></router-outlet>

 

Enable route debugging:

RouterModule.forRoot([
  {
    path: '', component: ShellComponent,
    children: [
      { path: 'welcome', component: WelcomeComponent },
      { path: 'movies', component: MovieListComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' }
    ]
  },
  { path: 'login', component: LoginComponent },
  { path: '**', component: PageNotFoundComponent }
], { enableTracing: true })

 

Talk