路由与导航 |
import { Routes, RouterModule, ... } from '@angular/router';
|
const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'path/:routeParam', component: MyComponent }, { path: 'staticPath', component: ... }, { path: '**', component: ... }, { path: 'oldPath', redirectTo: '/staticPath' }, { path: ..., component: ..., data: { message: 'Custom' } } ]);
const routing = RouterModule.forRoot(routes); |
为该应用配置路由。支持静态、参数化、重定向和通配符路由。也支持自定义路由数据和解析(resolve)函数。 |
<router-outlet></router-outlet> <router-outlet name="aux"></router-outlet> |
标记出一个位置,用来加载活动路由的组件。 |
<a routerLink="/path"> <a [routerLink]="[ '/path', routeParam ]"> <a [routerLink]="[ '/path', { matrixParam: 'value' } ]"> <a [routerLink]="[ '/path' ]" [queryParams]="{ page: 1 }"> <a [routerLink]="[ '/path' ]" fragment="anchor"> |
使用路由体系创建一个到其它视图的链接。路由体系由路由路径、必要参数、可选参数、查询参数和文档片段组成。要导航到根路由,请使用/ 前缀;要导航到子路由,使用./ 前缀;要导航到兄弟路由或父级路由,使用../ 前缀。 |
<a [routerLink]="[ '/path' ]" routerLinkActive="active"> |
当 routerLink 指向的路由变成活动路由时,为当前元素添加一些类(比如这里的 active )。 |
class CanActivateGuard implements CanActivate { canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean>|Promise<boolean>|boolean { ... } }
{ path: ..., canActivate: [CanActivateGuard] } |
用来定义类的接口。路由器会首先调用本接口来决定是否激活该路由。应该返回一个 boolean 或能解析成 boolean 的 Observable/Promise 。 |
class CanDeactivateGuard implements CanDeactivate<T> { canDeactivate( component: T, route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean>|Promise<boolean>|boolean { ... } }
{ path: ..., canDeactivate: [CanDeactivateGuard] } |
用来定义类的接口。路由器会在导航离开前首先调用本接口以决定是否取消激活本路由。应该返回一个 boolean 或能解析成 boolean 的 Observable/Promise 。 |
class CanActivateChildGuard implements CanActivateChild { canActivateChild( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<boolean>|Promise<boolean>|boolean { ... } }
{ path: ..., canActivateChild: [CanActivateGuard], children: ... } |
用来定义类的接口。路由器会首先调用本接口来决定是否激活一个子路由。应该返回一个 boolean 或能解析成 boolean 的 Observable/Promise 。 |
class ResolveGuard implements Resolve<T> { resolve( route: ActivatedRouteSnapshot, state: RouterStateSnapshot ): Observable<any>|Promise<any>|any { ... } }
{ path: ..., resolve: [ResolveGuard] } |
用来定义类的接口。路由器会在渲染该路由之前,首先调用它来解析路由数据。应该返回一个值或能解析成值的 Observable/Promise 。 |
class CanLoadGuard implements CanLoad { canLoad( route: Route ): Observable<boolean>|Promise<boolean>|boolean { ... } }
{ path: ..., canLoad: [CanLoadGuard], loadChildren: ... } |
|