angular路由模塊怎么用

這篇文章主要講解了“angular路由模塊怎么用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“angular路由模塊怎么用”吧！

在 Angular 中，路由是以模塊為單位的，每個模塊都可以有自己的路由。

快速上手

1、創建頁面組件、Layout 組件以及 Navigation 組件，供路由使用

• 創建首頁頁面組件ng g c pages/home

• 創建關于我們頁面組件ng g c pages/about

• 創建布局組件ng g c pages/layout

• 創建導航組件ng g c 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 } from "@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 g m user --routing=true 一并創建該模塊的路由模塊

2、創建登錄頁面組件 ng g c user/pages/login

3、創建注冊頁面組件 ng g c user/pages/register

4、配置用戶模塊的路由規則

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 {}

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
} 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路由模塊怎么用”的內容了，經過本文的學習后，相信大家對angular路由模塊怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！