指定容器
<router-outlet></router-outlet>
配置路由词典
//①创建一个模块类 app.router.ts
approutingmodule
@ngmodule({
imports:[routermodule]
})
//②在这个模块类创建一个routes类型的变量(对象数组)
const routes :routes = [
{path:'login',component:logincomponent},
{path:'',component:logincomponent},
{path:'**',component:notfoundcomponent}
]
//③给自定义的路由模块设置路由词典
@ngmodule({
imports:[routermodule.forroot(routes)]
})
//④在跟模块(appmodule)中,指定依赖于
approutingmodule
@ngmodule({
imports:[approutingmodule]
})
路由跳转
import {router} from '@angular/router'
constructor(private myrouter:router){}
this.myrouter.navigatebyurl()
<a routerlink="/mylogin"></a>
前进与后退
import {location} from '@angular/common'
constructor(private mylocation:location){}
this.mylocation.back/forward()
路由传参
//send
<a routerlink="/mymain/zhangsan"></a>
this.myrouter.navigatebyurl('mymain/zhangsan')
//receive
//①配置接收方的路由地址
{
path:'mymail/:uname'
}
//②接收参数
import {activatedroute} from '@angular/router'
constructor(private myar:activatedroute){}
this.myar.params.subscribe((result:any)=>{})
路由嵌套
//指定容器
<router-outlet></router-outlet>
{
path:'mya',
children:[
{path:'myb',***}
]
}
路由守卫(控制一个路由中的组件是否能够访问鉴权、是否授权登录。。)
//①build
import {injectable} from '@angular/core'
import {canactivate} from '@angular/router'
@injectable()
export class mailguard implements canactivate{
canactivate(){
return true/false
}
}
//②use
//给路由守卫服务 指定 提供商在模块中装饰器对应的元数据中指定
@ngmodule({
providers:[mailguard]
})
//到app.router.ts中设置路由守卫
{
path:'mail',
canactivate:[mailguard]
}
网友评论