angular2 api整理之路由模块

不知不觉接触angular2也有半年时间了,但是对于angular2仍然是一知半解。总觉得应该系统的了解一下它的api,正好ng2马上要有稳定版本了。是时候花一些时间整理一下了

一、常量

1. PRIMARY_OUTLET

2. ROUTER_DIRECTIVES

路由指令集合常量

二、接口

1. 活跃路由ActivatedRoute

可以获取当前路由的参数和数据

1
2
3
4
5
6
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: Observable<string> = route.params.map(p => p.id);
    const data = route.data.map(d => d.user); //includes `data` and `resolve`
  }
}

2. 活跃路由快照ActivatedRouteSnapshot

具体功能不明

1
2
3
4
5
6
class MyComponent {
  constructor(route: ActivatedRoute) {
    const id: string = route.snapshot.params.id;
    const data = route.snapshot.data;
  }
}

3. 可激活CanActivate

实现此接口并重写canActivate方法。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean> {
    return this.permissions.canActivate(this.currentUser, this.route.params.id);
  }
}
bootstrap(AppComponent, [
  CanActivateTeam,
  provideRouter([{
    path: 'team/:id',
    component: Team,
    canActivate: [CanActivateTeam]
  }])
);

4. CanDeactivate

5. 其他选项ExtraOptions

6. 解决 Resolve

实现此接口并重写Resolve方法。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
class TeamResolver implements Resolve {
  constructor(private backend: Backend) {}
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<any> {
    return this.backend.fetchTeam(this.route.params.id);
  }
}
bootstrap(AppComponent, [
  TeamResolver,
  provideRouter([{
    path: 'team/:id',
    component: TeamCmp,
    resolve: {
      team: TeamResolver
    }
  }])
);

7. 路由 Route

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

class Route {
path : string
terminal : boolean
pathMatch : 'full'|'prefix'
component : Type|string
redirectTo : string
outlet : string
canActivate : any[]
canDeactivate : any[]
data : Data
resolve : ResolveData
children : Route[]
}

8. 路由状态 RouterState

1
2
3
4
5
6
7
class MyComponent {
  constructor(router: Router) {
    const state = router.routerState;
    const id: Observable<string> = state.firstChild(state.root).params.map(p => p.id);
    const isDebug: Observable<string> = state.queryParams.map(q => q.debug);
  }
}

9. 路由状态快照RouterStateSnapshot

1
2
3
4
constructor(router: Router) {
  const snapshot = router.routerState.snapshot;
}
}

10. 路径树 UrlTree

1
2
3
4
5
6
class UrlTree {
root : UrlSegment
queryParams : {[key: string]: string}
fragment : string
toString() : string
}

三、类

1. 默认路径初始化 DefaultUrlSerializer

1
2
3
4
  class DefaultUrlSerializer {
  parse(url: string) : UrlTree
  serialize(tree: UrlTree) : string
  }

2. 取消导航NavigationCancel

1
2
3
4
5
constructor(id: number, url: string)
id : number
url : string
toString() : string
}

3. 结束导航 NavigationEnd

1
2
3
4
5
6
7
8

class NavigationEnd {
constructor(id: number, url: string, urlAfterRedirects: string)
id : number
url : string
urlAfterRedirects : string
toString() : string
}

4. 导航错误NavigationError

1
2
3
4
5
6
7
class NavigationError {
constructor(id: number, url: string, error: any)
id : number
url : string
error : any
toString() : string
}

5. 根路由 RootRouter

1
2
3
4
5
  class RootRouter {
  constructor(registry: RouteRegistry, location: Location, primaryComponent: Type)
  commit(instruction: Instruction, _skipLocationChange?: boolean) : Promise<any>
  dispose() : void
  }

6. 路由数据 RouteData

1
2
3
4
5
class RouteData {
constructor(data?: {[key: string]: any})
data : {[key: string]: any}
get(key: string) : any
}

7. 路由参数 RouteParams

1
2
3
4
5
class RouteParams {
constructor(params: {[key: string]: string})
params : {[key: string]: string}
get(param: string) : string
}

8. 注册路由 RouteRegistry

1
2
3
4
5
6
7
8
9
  class RouteRegistry {
  constructor(_rootComponent: Type)
  config(parentComponent: any, config: RouteDefinition) : void
  configFromComponent(component: any) : void
  recognize(url: string, ancestorInstructions: Instruction[]) : Promise<Instruction>
  generate(linkParams: any[], ancestorInstructions: Instruction[], _aux?: any) : Instruction
  hasRoute(name: string, parentComponent: any) : boolean
  generateDefault(componentCursor: Type) : Instruction
  }

9. 路由 Router

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  class Router {
  constructor(registry: RouteRegistry, parent: Router, hostComponent: any, root?: Router)
  navigating : boolean
  lastNavigationAttempt : string
  currentInstruction : Instruction
  registry : RouteRegistry
  parent : Router
  hostComponent : any
  root : Router
  childRouter(hostComponent: any) : Router
  auxRouter(hostComponent: any) : Router
  registerPrimaryOutlet(outlet: RouterOutlet) : Promise<any>
  unregisterPrimaryOutlet(outlet: RouterOutlet) : void
  registerAuxOutlet(outlet: RouterOutlet) : Promise<any>
  isRouteActive(instruction: Instruction) : boolean
  config(definitions: RouteDefinition[]) : Promise<any>
  navigate(linkParams: any[]) : Promise<any>
  navigateByUrl(url: string, _skipLocationChange?: boolean) : Promise<any>
  navigateByInstruction(instruction: Instruction, _skipLocationChange?: boolean) : Promise<any>
  commit(instruction: Instruction, _skipLocationChange?: boolean) : Promise<any>
  subscribe(onNext: (value: any) => void, onError?: (value: any) => void) : Object
  deactivate(instruction: Instruction) : Promise<any>
  recognize(url: string) : Promise<Instruction>
  renavigate() : Promise<any>
  generate(linkParams: any[]) : Instruction
  }

四、 指令

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
class RouterLink {
commands : any[]
queryParams : {[k: string]: any}
fragment : string
urlTree : UrlTree
router : Router
route : ActivatedRoute
locationStrategy : LocationStrategy
routerLink
onClick(button: number, ctrlKey: boolean, metaKey: boolean) : boolean
}

2. RouterLinkActive

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
class RouterLinkActive {
links : QueryList<RouterLink>
linksWithHrefs : QueryList<RouterLinkWithHref>
classes : string[]
subscription : Subscription
routerLinkActiveOptions : {exact: boolean}
router : Router
element : ElementRef
renderer : Renderer
ngAfterContentInit() : void
routerLinkActive
ngOnChanges(changes: {}) : any
ngOnDestroy() : any
update() : void
reduceList(currentUrlTree: UrlTree, q: QueryList<any>) : boolean
}

3. RouterLinkWithHref

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
class RouterLinkWithHref {
target : string
commands : any[]
queryParams : {[k: string]: any}
fragment : string
href : string
urlTree : UrlTree
router : Router
route : ActivatedRoute
locationStrategy : LocationStrategy
routerLink
ngOnChanges(changes: {}) : any
onClick(button: number, ctrlKey: boolean, metaKey: boolean) : boolean
updateTargetUrlAndHref() : void
}

4. RouterOutlet

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
class RouterOutlet {
activated : ComponentRef<any>
outletMap : RouterOutletMap
location : ViewContainerRef
componentFactoryResolver : ComponentFactoryResolver
isActivated : boolean
component : Object
activatedRoute : ActivatedRoute
deactivate() : void
activate(activatedRoute: ActivatedRoute, providers: ResolvedReflectiveProvider[], outletMap: RouterOutletMap) : void
}
署名 - 非商业性使用 - 禁止演绎 4.0