封面

angular2 api整理之路由模块

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

一、常量

1. PRIMARY_OUTLET

2. ROUTER_DIRECTIVES

路由指令集合常量

二、接口

1. 活跃路由ActivatedRoute

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

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

具体功能不明

class MyComponent {
constructor(route: ActivatedRoute) {
const id: string = route.snapshot.params.id;
const data = route.snapshot.data;
}
}

3. 可激活CanActivate

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

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方法。

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


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

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

constructor(router: Router) {
const snapshot = router.routerState.snapshot;
}
}

10. 路径树 UrlTree

class UrlTree {
root : UrlSegment
queryParams : {[key: string]: string}
fragment : string
toString() : string
}

三、类

1. 默认路径初始化 DefaultUrlSerializer

class DefaultUrlSerializer {
parse(url: string) : UrlTree
serialize(tree: UrlTree) : string
}

2. 取消导航NavigationCancel

constructor(id: number, url: string)
id : number
url : string
toString() : string
}

3. 结束导航 NavigationEnd


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

4. 导航错误NavigationError

class NavigationError {
constructor(id: number, url: string, error: any)
id : number
url : string
error : any
toString() : string
}

5. 根路由 RootRouter

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

6. 路由数据 RouteData

class RouteData {
constructor(data?: {[key: string]: any})
data : {[key: string]: any}
get(key: string) : any
}

7. 路由参数 RouteParams

class RouteParams {
constructor(params: {[key: string]: string})
params : {[key: string]: string}
get(param: string) : string
}

8. 注册路由 RouteRegistry

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

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
}

四、 指令

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

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

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

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
}
文章目录
  1. 1. 一、常量
    1. 1.1. 1. PRIMARY_OUTLET
    2. 1.2. 2. ROUTER_DIRECTIVES
  2. 2. 二、接口
    1. 2.1. 1. 活跃路由ActivatedRoute
    2. 2.2. 2. 活跃路由快照ActivatedRouteSnapshot
    3. 2.3. 3. 可激活CanActivate
    4. 2.4. 4. CanDeactivate
    5. 2.5. 5. 其他选项ExtraOptions
    6. 2.6. 6. 解决 Resolve
    7. 2.7. 7. 路由 Route
    8. 2.8. 8. 路由状态 RouterState
    9. 2.9. 9. 路由状态快照RouterStateSnapshot
    10. 2.10. 10. 路径树 UrlTree
  3. 3. 三、类
    1. 3.1. 1. 默认路径初始化 DefaultUrlSerializer
    2. 3.2. 2. 取消导航NavigationCancel
    3. 3.3. 3. 结束导航 NavigationEnd
    4. 3.4. 4. 导航错误NavigationError
    5. 3.5. 5. 根路由 RootRouter
    6. 3.6. 6. 路由数据 RouteData
    7. 3.7. 7. 路由参数 RouteParams
    8. 3.8. 8. 注册路由 RouteRegistry
    9. 3.9. 9. 路由 Router
  4. 4. 四、 指令
    1. 4.1. 1. RouterLink
    2. 4.2. 2. RouterLinkActive
    3. 4.3. 3. RouterLinkWithHref
    4. 4.4. 4. RouterOutlet
twitter分享
Fork me on GitHub