Angular实现SPA

指定容器

<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]
}