Angular 路由
路由是連接組件的, 它是樹形結(jié)構(gòu)的, 可以使用它在 angular 中實(shí)現(xiàn)路徑的導(dǎo)航模式
可以將路由看成是一組規(guī)則, 它決定了url的變化對應(yīng)著哪一種狀態(tài), 具體表現(xiàn)就是不同視圖的切換, 在 Angular 中, 路由時(shí)非常重要的組成部分, 組件的實(shí)例化與銷毀, 模塊的加載, 組件的生命周期鉤子的發(fā)起都與它有關(guān).
路由的基本使用
路由器是一個(gè)調(diào)度中心, 它是一套規(guī)則的列表, 能偶查詢當(dāng)前 URL 對應(yīng)的規(guī)則, 并展示出相應(yīng)的視圖
路由是列表里面的一個(gè)規(guī)則, 即路由定義, 它有很多功能字段
- path字段, 表示該路由中的URL路徑部分
- Component字段, 表示與該路由相關(guān)聯(lián)的操作
每個(gè)帶路由的 Angular 應(yīng)用都有一個(gè)路由器服務(wù)的單例對象, 通過路由定義的列表進(jìn)行配置后使用
app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
// 路由配置
const routes: Routes = [
{
// 此處實(shí)現(xiàn)默認(rèn)進(jìn)到應(yīng)用中就進(jìn)入 HomeComponent 組件
path: '',
component: HomeComponent
},
{
path: 'home',
component: HomeComponent
},
{
// 使用通配符進(jìn)行匹配路由
path: '**',
component: HomeComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
在 HTML 中需要使用 router-outlet 去顯示路由中的內(nèi)容, 類似于 Vue 中的router-view
<span>{{ title }} app is running!</span>
<!-- 第一個(gè)參數(shù)填寫要跳轉(zhuǎn)的路徑, 第二個(gè)參數(shù)是如果當(dāng)前路由是要跳轉(zhuǎn)的路由, 就會給當(dāng)前的 a 添加一個(gè)類 "router-link-active" -->
<a [routerLink]="['/home']" routerLinkActive="router-link-active">首頁</a>
<router-outlet></router-outlet>
上述具體的工作流程, 可以描述為
- 當(dāng)瀏覽器地址欄的 URL 變化時(shí), 路徑部分 /home 滿足了列表中的 path 為 home 的這個(gè)路由定義, 激活了對應(yīng)的實(shí)例, 顯示視圖
路由的嵌套
父子路由嵌套配置
app-routing.module.ts
{
path: 'parent',
component: HomeComponent,
children: [
{
path: 'child',
component: ChildComponent
}
]
}
記得需要在 HomeComponent 中同樣加上 router-outlet 就可以了, 注意在跳轉(zhuǎn)到子路由時(shí)候, 需要加上全路徑
路由傳參
query
在 a 標(biāo)簽上添加一個(gè)參數(shù) queryParams, 并通過 this.routerinfo.snapshot.queryParams 獲取參數(shù)
query 形式的傳參會顯示的路由URL上
<a [routerLink]="['/home']" [queryParams]="{id:3}">home</a>
在目標(biāo)路由中可以接收參數(shù)
import { ActivateRoute } from '@angular/router';
constructor(private routerinfo:ActivateRoute) { }
ngOnInit() {
// id 為參數(shù)名字
this.id = this.routerinfo.snapshot.queryParams['id']
}
params
吸怪路由配置文件path, 路由導(dǎo)航a標(biāo)簽 routerLink 后面數(shù)組的第二個(gè)參數(shù)為傳遞到值, 并通過 subscribe 的方式獲取 name 參數(shù)
{
path: 'home/:name',
component: HomeComponent
}
<a [routerLink]="['/home', '我是url傳遞的參數(shù)']" [queryParams]="{id:3}">home</a>
import { ActivateRoute } from '@angular/router';
constructor(private routerinfo:ActivateRoute) { }
ngOnInit() {
this.id = this.routerinfo.params.subscribe((params:Params) =>{
this.name = params['name']
})
}
