這篇文章帶大家深入了解一下Angular中的路由，看看快速上手的方法，介紹一下匹配規則、路由傳參、路由嵌套、路由守衛等，希望對大家有所幫助！
在 Angular 中，路由是以模組為單位的，每個模組都可以有自己的路由。 【相關教學推薦：《angular教學》】
建立頁面元件、Layout 元件以及Navigation 元件，供路由使用
建立首頁頁面元件ng g c pages/home
#建立關於我們頁面元件ng g c pages/about
#建立佈局元件ng g c pages/layout
建立導覽元件ng g c pages/navigation
建立路由規則
// app.module.ts
import { Routes } from "@angular/router"
const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "about",
component: AboutComponent
}
]引入路由模組並啟動
// app.module.ts
import { RouterModule, Routes } from "@angular/router"
@NgModule({
imports: [RouterModule.forRoot(routes, { useHash: true })],
})
export class AppModule {}新增路由插座
<!-- 路由插座即占位组件 匹配到的路由组件将会显示在这个地方 --> <router-outlet></router-outlet>
在導航元件中定義連結
<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、<span style="font-size: 16px;">404</span> 頁面
const routes: Routes = [
{
path: "home",
component: HomeComponent
},
{
path: "**",
component: NotFoundComponent
}
]<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"
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}路由懶載入是以模組為單位的。
建立使用者模組ng g m user --routing=true 並建立該模組的路由模組
建立登入頁面元件ng g c user/pages/login
#建立註冊頁面元件ng g c user/pages/register
#設定使用者模組的路由規則
import { NgModule } from "@angular/core"
import { Routes, RouterModule } from "@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 {}#將使用者路由模組關聯到主路由模組
// app-routing.module.ts
const routes: Routes = [
{
path: "user",
loadChildren: () => import("./user/user.module").then(m => m.UserModule)
}
]在導航元件中新增存取連結
<a routerLink="/user/login">登录</a> <a routerLink="/user/register">注册</a>
路由守衛會告訴路由是否允許導航到請求的路由。
路由守方法可以回傳boolean 或Observable \<boolean\> 或Promise \<boolean\>，它們在將來的某個時間點解析為布林值
1、<span style="font-size: 16px;">#CanActivate</span>
檢查使用者是否可以存取某一條路由。
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<span style="font-size: 16px;"> </span>
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<span style="font-size: 16px;"></span>
import { Injectable } from "@angular/core"
import {
CanDeactivate,
ActivatedRouteSnapshot,
RouterStateSnapshot,
UrlTree
} from "@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 <span style="font-size: 16px;"></span>
$ 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)
}
}程式影片！ ！
以上是深入了解Angular中的路由，如何快速上手？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
