[Angular] N things you might don't know about Angular Route
Angular 39 you Route about Know Don
2023-09-14 08:59:17 时间
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 })
相关文章
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [Angular] In angular world and out angular world
- [Angular 9] Improved Dependency Injection with the new providedIn scopes 'any' and 'platform'
- [Angular] ngClass conditional
- [Angular] 'providedIn' for service
- [Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE
- [Angular 2] ROUTING IN ANGULAR 2 REVISITED
- [Angular 2] Using a Reducer to Change an Object's Property Inside an Array
- Angular jasmine单元测试框架里spyOn的创建原理
- Angular 项目中 angular.json builder 字段的可选项介绍
- 关于 Angular 应用的入口
- Angular Universal 学习笔记 - 客户端渲染和服务器端渲染的区别
- 通过一个简单的例子学习Angular Injection Token工作原理
- Angular应用ng build的一些边界情况boundary condition