在Angular 中，路由以模块为单位的，每個模組都可以有自己的路由。 【相關教學推薦：《angular教學》】
1、建立頁面元件、Layout 元件以及Navigation 元件，供路由使用
建立首頁頁面元件ng gc pages/home
建立關於我們頁面元件ng gc pages/about
建立佈局元件ng gc pages/layout
建立導覽元件ng gc pages/navigation
2、建立路由規則
// app.module.ts
import { Routes } from "@angular/router"
const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "about",
component: AboutComponent
}
] 3、引入路由模組並啟動
// app.module.ts
import { RouterModule, Routes } 從 "@angular/router"
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
})
export class AppModule {} 4、新增路由插座
<!-- 路由插座即佔位元件配對到的路由元件將會顯示在這個地方--> <router-outlet></router-outlet>
5、在導覽元件中定義連結
<a routerLink="/home">首頁</a> <a routerLink="/about">關於我們</a>
1、重定向
const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "about",
component: AboutComponent
},
{
path: "",
// 重定向redirectTo: "home",
// 完全符合pathMatch: "full"
}
] 2、404 頁面
const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "about",
component: AboutComponent
},
{
path: "**",
component: NotFoundComponent
}
]1、查詢參數
<a routerLink="/about" [queryParams]="{ name: 'kitty' }">關於我們</a> import { ActivatedRoute } from "@angular/router"
export class AboutComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
this.route.queryParamMap.subscribe(query => {
query.get("name")
})
}
} 2、動態參數
const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "about/:name",
component: AboutComponent
}
] <a [routerLink]="['/about', 'zhangsan']">關於我們</a>
import { ActivatedRoute } from "@angular/router"
export class AboutComponent implements OnInit {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
this.route.paramMap.subscribe(params => {
params.get("name")
})
}
}路由嵌套指的是如何定义子级路由。
const routes: Routes = [
{
path: "about",
component: AboutComponent,
children: [
{
path: "introduce",
component: IntroduceComponent
},
{
path: "history",
component: HistoryComponent
}
]
}
] <!-- about.component.html -->
<app-layout>
<p>about works!</p>
<a routerLink="/about/introduce">公司簡介</a>
<a routerLink="/about/history">發展歷史</a>
<div>
<router-outlet></router-outlet>
</div>
</app-layout>命名插座
將子級路由組件顯示到不同的路由插座。
{
path: "about",
component: AboutComponent,
children: [
{
path: "introduce",
component: IntroduceComponent,
outlet: "left"
},
{
path: "history",
component: HistoryComponent,
outlet: "right"
}
]
} <!-- about.component.html --> <app-layout> <p>about works!</p> <router-outlet name="left"></router-outlet> <router-outlet name="right"></router-outlet> </app-layout>
<a
[routerLink]="[
'/about',
{
outlets: {
left: ['introduce'],
right: ['history']
}
}
]"
>關於我們</a><!-- app.component.html --> <button (click)="jump()">跳到發展歷史</button>
// app.component.ts
import { Router } from "@angular/router"
export class HomeComponent {
constructor(private router: Router) {}
jump() {
this.router.navigate(["/about/history"], {
queryParams: {
name: "Kitty"
}
})
}
}將根模組中的路由配置抽象化成一個單獨的路由模組，稱為根路由模块，然後在根模組中引入根路由模組。
import { NgModule } from "@angular/core"
import { HomeComponent } from "./pages/home/home.component"
import { NotFoundComponent } from "./pages/not-found/not-found.component"
const routes: Routes = [
{
path: "",
component: HomeComponent
},
{
path: "**",
component: NotFoundComponent
}
]
@NgModule({
declarations: [],
imports: [RouterModule.forRoot(routes, { useHash: true })],
// 匯出Angular 路由功能模組，因為在根模組的根元件中使用了RouterModule 模組中提供的路由插座組件exports: [RouterModule]
})
export class AppRoutingModule {} import { BrowserModule } from "@angular/platform-browser"
import { NgModule } from "@angular/core"
import { AppComponent } from "./app.component"
import { AppRoutingModule } from "./app-routing.module"
import { HomeComponent } from "./pages/home/home.component"
import { NotFoundComponent } from "./pages/not-found/not-found.component"
@NgModule({
declarations: [AppComponent，HomeComponent, NotFoundComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}路由懶加載是以模块為單位的。
1、建立使用者模組ng gm user --routing=true一並建立該模組的路由模組
2、建立登入頁面元件ng gc user/pages/login
3、建立註冊頁面ng gc user/pages/register
4、配置使用者模組的路由規則
import { NgModule } from "@angular/core"
import { Routes, RouterModule } 從 "@angular/router"
import { LoginComponent } from "./pages/login/login.component"
import { RegisterComponent } from "./pages/register/register.component"
const routes: Routes = [
{
path: "login",
component: LoginComponent
},
{
path: "register",
component: RegisterComponent
}
]
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UserRoutingModule {} 5、將使用者路由模組關聯到主路由模組
// app-routing.module.ts
const routes: Routes = [
{
path: "user",
loadChildren: () => import("./user/user.module").then(m => m.UserModule)
}
] 6.在導覽元件中新增存取連結
<a routerLink="/user/login">登入</a> <a routerLink="/user/register">註冊</a>
路由守衛會告訴路由是否允許導航到請求的路由。
路由守方法可以傳回boolean或Observable <boolean>或Promise <boolean> ，它們在未來的某個時間點解析為布林值。
1.CanActivate
檢查使用者是否可以访问某一个路由。
CanActivate为接口，路由守衛類別要實作該接口，該接口規定類別中需要有canActivate 方法，方法決定是否允許存取目標路由。
路由可以應用多个守卫，所有守衛方法都允許，路由才被允許訪問，有一個守衛方法不允許，則路由不允許被訪問。
建立路由守衛： ng g guard guards/auth
import { Injectable } from "@angular/core"
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from "@angular/router"
import { Observable } from "rxjs"
@Injectable({
providedIn: "root"
})
export class AuthGuard implements CanActivate {
constructor(private router: Router) {}
canActivate(): boolean | UrlTree {
// 用於實作跳轉return this.router.createUrlTree(["/user/login"])
// 禁止存取目標路由return false
// 允許存取目標路由return true
}
} {
path: "about",
component: AboutComponent,
canActivate: [AuthGuard]
} 2.CanActivateChild
檢查使用者是否方可存取某個子路由。
建立路由守衛： ng g guard guards/admin注意：選擇CanActivateChild，需要將箭頭移到這個選項並且敲擊空格確認選擇。
import { Injectable } from "@angular/core"
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from "@angular/router"
import { Observable } from "rxjs"
@Injectable({
providedIn: "root"
})
export class AdminGuard implements CanActivateChild {
canActivateChild(): boolean | UrlTree {
return true
}
} {
path: "about",
component: AboutComponent,
canActivateChild: [AdminGuard],
children: [
{
path: "introduce",
component: IntroduceComponent
}
]
} 3、CanDeactivate
檢查使用者是否可以退出路由。
例如用戶在表單中輸入的內容沒有保存，用戶又要離開路由，此時可以呼叫該守衛提示用戶。
import { Injectable } from "@angular/core"
import {
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
UrlTree
} 從 "@angular/router"
import { Observable } from "rxjs"
export interface CanComponentLeave {
canLeave: () => boolean
}
@Injectable({
providedIn: "root"
})
export class UnsaveGuard implements CanDeactivate<CanComponentLeave> {
canDeactivate(component: CanComponentLeave): boolean {
if (component.canLeave()) {
return true
}
return false
}
} {
path: "",
component: HomeComponent,
canDeactivate: [UnsaveGuard]
} import { CanComponentLeave } from "src/app/guards/unsave.guard"
export class HomeComponent implements CanComponentLeave {
myForm: FormGroup = new FormGroup({
username: new FormControl()
})
canLeave(): boolean {
if (this.myForm.dirty) {
if (window.confirm("有資料未儲存, 確定要離開嗎")) {
return true
} else {
return false
}
}
return true
} 4、Resolve
允許在進入路由前先取得數據，待數據取得完成後再進入路由。
ng g resolver <name>
import { Injectable } from "@angular/core"
import { Resolve } from "@angular/router"
type returnType = Promise<{ name: string }>
@Injectable({
providedIn: "root"
})
export class ResolveGuard implements Resolve<returnType> {
resolve(): returnType {
return new Promise(function (resolve) {
setTimeout(() => {
resolve({ name: "張三" })
}, 2000)
})
}
} {
path: "",
component: HomeComponent,
resolve: {
user: ResolveGuard
}
} export class HomeComponent {
constructor(private route: ActivatedRoute) {}
ngOnInit(): void {
console.log(this.route.snapshot.data.user)
}
}