溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關如何理解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、404 頁面
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、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
} 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
允許在進入路由之前先獲取數據，待數據獲取完成之后再進入路由
$ 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中的路由就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
