看個具體的例子。

const CUSTOM_ROUTES: Routes = [{ path: "custom/:id", component: RouteDemoComponent,data:{ name: 'jerry'},canActivate: [CanActivateTeam] } ];

canActivate的類型是數(shù)組，而不是單個元素。

在app.module.ts的providers里，導入CanActivateTeam:

canActivateTeam的實現(xiàn)：

@Injectable() export class CanActivateTeam implements CanActivate {constructor(private permissions: JerryPermissions, private currentUser: UserToken) {}canActivate(route: ActivatedRouteSnapshot,state: RouterStateSnapshot): Observable<boolean|UrlTree>|Promise<boolean|UrlTree>|boolean|UrlTree {return this.permissions.canActivate(this.currentUser, route.params.id);} }

permissions的實現(xiàn)：

export class UserToken {} export class JerryPermissions {canActivate(user: UserToken, id: string): boolean {console.log('Jerry');return true;} }

運行時數(shù)據(jù)：

大部分字段的值都是從Route interface里帶過來的。

使用依賴注入獲得CanActivateTeam的實例：

根據(jù)token，對實例進行hydrate：

record里包含了Component 工廠：

依賴注入完成：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的Angular路由里的canActivate用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。