創(chuàng)建項(xiàng)目
ng new router --routing
\\ 加routing參數(shù)
\\ 會(huì)新增一個(gè)app-routing.module.ts 文件
路由的基本使用
| 名稱 | 簡(jiǎn)介 |
|---|---|
| Routes | 路由的配置，保存著哪一個(gè)URL對(duì)應(yīng)展示哪一個(gè)組件和在哪一個(gè)RouterOutler展示 |
| RouterOutler | 在HTML中標(biāo)記路由內(nèi)容呈現(xiàn)的占位符指令 |
| Router | 運(yùn)行時(shí)執(zhí)行的路由對(duì)象，可以通過navigate()和navigateByUrl()方法來導(dǎo)航到指定路由 |
| RouterLink | 在HTML中聲明導(dǎo)航的指令 |
| ActivatedRoute | 當(dāng)前激活的路由對(duì)象，保存著當(dāng)前路由信息，路由地址，路由參數(shù) |
路由對(duì)象圖示
image.png
路由基本配置
const routes:Routes = [
{path:'',component:HomeComponent}, \\ 注意path里面不要加\線
{path:'app',component:AdminComponent}
];
路由通配符配置
{path:'**',component:Code404Component}
// 配置里面加一條代表沒有的都往這里，注意這里不能寫在前面，不然angualr的路由會(huì)優(yōu)先匹配這里
HTML里面跳轉(zhuǎn)鏈接
<a [routerLink]="['/']">主頁</a>
<a [routerLink]="['/app']">后臺(tái)</a>
<router-outlet></router-outlet>
在js里面跳轉(zhuǎn)路由
<input type='button' value='跳轉(zhuǎn)到后臺(tái)' (click)="toApp()">
constructor(private router:Router){
}
// 點(diǎn)擊事件
toApp(){
this.router.navigate(['/app'])
}
路由數(shù)據(jù)傳遞
- 在查詢參數(shù)中傳遞數(shù)據(jù)
/app?id=2 => ActivatedRoute.queryParams[id]
//html寫法
<a [routerLink]="['/app']" [queryParams]="{id:1}">后臺(tái)</a>
// js寫法
private appId:number
constructor(private routerInfo:ActivatedRoute) { }
ngOnInit() {
this.appId = this.routerInfo.snapshot.queryParams['id']
}
- 在路由路徑中傳遞數(shù)據(jù)
{path:/app/:id} => /app/1 => ActivatedRoute.params[id]
// 必須先定義好
<a [routerLink]="['/app',1]">后臺(tái)</a>
- 在路由配置中傳遞數(shù)據(jù)
{path:/product,component:Appcomponent,data:[IsProd:true]} => ActivatedRoute.data[0][IsProd]
參數(shù)快照和參數(shù)訂閱
snapshot 是參數(shù)快照當(dāng)路由進(jìn)入該組件的時(shí)候，然后再點(diǎn)擊按鈕進(jìn)入該路由路由里面的的ngOnInit()方法只執(zhí)行一次，已經(jīng)被激活，說以第二次這個(gè)不會(huì)被執(zhí)行
ngOnInit() {
this.appId = this.routerInfo.snapshot.queryParams['id']
}
subscribe 是參數(shù)訂閱,這個(gè)屬于RxJs的東西
private appId:number
constructor(private routerInfo:ActivatedRoute) { }
ngOnInit() {
this.routerInfo.params.subscribe((params:Params) => {
this.appId = params['id']
})
}
重定向路由
{path:'',redirectTo:'/home',pathMatch:'full'},
子路由
{path:'home',component:HomeComponent,children:[
{path:'',component:IndexComponent}
]},
// 記得去HomeComponent，里面添加<router-outlet></router-outlet>指令
輔助路由
// html 視圖部分
<router-outlet></router-outlet>
<router-outlet name='aux'></router-outlet>
//路由配置部分
{path:'app',Appcomponet,outlet:'aux'}
路由守衛(wèi)
只有當(dāng)用戶已經(jīng)登錄并擁有一些權(quán)限時(shí)才能進(jìn)入
多表單組成的向?qū)В缱?cè)流程，只有滿足條件才能進(jìn)入下一個(gè)路由
用戶執(zhí)行操作沒有保存，試圖離開時(shí)候進(jìn)行相關(guān)提示
| 名稱 | 說明 |
|---|---|
| CanAxtivate | 處理導(dǎo)航到某路由 |
| CanDeactivate | 處理當(dāng)前路由離開 |
| Resolve | 在路由激活前獲取路由數(shù)據(jù) |
- CanAxtivate的使用
// 新建一個(gè)文件
import {CanActivate} from '@angular/router'
export class LoginGuard implements CanActivate{
// 路由會(huì)根據(jù)這個(gè)方法的返回如果返回false就拒絕訪問
canActivate(){
let isLOgin:boolean = true;
return isLOgin;
}
}
canActivate是一個(gè)數(shù)組，可以接收多個(gè)，當(dāng)每一個(gè)都返回ｔｒｕｅ時(shí)候才允許
// 修改路由配置，添加一個(gè)屬性canActivate
{path:'home',component:HomeComponent,children:[
{path:'',component:IndexComponent}
],canActivate:[LoginGuard]},
修改NgModule
providers:[LoginGuard]
2.CanDeactivate的使用
// 新建一個(gè)文件
import {CanDeactivate} from '@angular/router'
import {AppComponent} from "../app.component";
/**
* 處理用戶離開
* 接收一個(gè)泛型
*/
export class OutGuard implements CanDeactivate<AppComponent>{
// component 里面保存著AppComponent的數(shù)據(jù)
canDeactivate(component:AppComponent){
return window.confirm('您還沒有保存確定要離開嗎？')
}
}
修改路由的配置
{path:'home',component:HomeComponent,children:[
{path:'',component:IndexComponent}
],canActivate:[LoginGuard],canDeactivate:[OutGuard]},
providers:[LoginGuard,OutGuard]
3.Resolve 的使用
Resolve
