Angular中是如何使用路由的

這篇文章主要介紹“Angular中是如何使用路由的”，在日常操作中，相信很多人在Angular中是如何使用路由的問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”Angular中是如何使用路由的”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

路由的概念在前端的框架中得到了廣泛的應用,對于路由的感念不做闡述,路由的應用無外乎就是嵌套、傳參，高級一些的功能如懶加載、預加載，再高級一些的如：路由守衛等。本篇我們就一起來看一看在Angular中如何使用路由。

請按照圖中結構來創建我們的項目

創建項目&一級模塊：

• ng new angular-router-sample

• ng g c pages/login

• ng g c pages/home

• ng g c pages/mine

注：通過cli創建的組件會進行自動注冊。

起步

1. 在App的html模板中配置

配置路由跳轉&路由出口（router-outlet）

<div>
  <a [routerLink]="['/login']">登陸</a>｜
  <a [routerLink]="['/home']">首頁</a>｜
  <a [routerLink]="['/mine']">我的</a>
</div>
<!-- 配置路由出口 -->
<router-outlet></router-outlet>

2. 在App的app-routing中配置路由器

• 一個最簡單的組件路由必備一個path（路由的Url）屬性和一個component（Url對應加載的組件）屬性：

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'mine',
    component: MineComponent,
  },
];

• 當我們意外訪問了一個不存在的Url的時候我們的404頁面怎么配置？

path支持一個特殊的通配符來支持“**”，當在路由表中沒有成功匹配的情況下會最后指向通配符對應的組件

const routes: Routes = [
  ...
  {
    path: '**',
    component: NotFountComponent,
  },
];

注意：路由器匹配策略為先到先得，故不具體的路由配置靠后配置。

3. 設置有效的默認路由

由于我們項目默認啟動后無具體路由匹配這樣并不友好，我們需要設置一個有效的默認路由來展示給用戶。

• 配置的默認路由應該在通配路由之上。

const routes: Routes = [
  ...
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  ...
];

配置子模塊&子路由

此時我們的路由配置全部app-routing，這樣對于簡單的應用當然是可行的，但是隨著應用的迭代、模塊的增加顯然配置在一起對于管理和擴展都是一項挑戰，模塊的拆分就成來必然。

1. 為Home組件增加帶路由的模塊配置

通過cli為Home組件創建帶路由的模塊配置: ng generate module pages/home/home --module app --flat --routing

imports: [
    BrowserModule,
    HomeRoutingModule,
    AppRoutingModule,
]

注：用cli創建的模塊會自動配置到根模塊，但我們手動的調整一下順序將AppRoutingModule移動到最后，滿足先到先得的策略。

2. 將Home組件的路由配置轉移到home-routing

const routes: Routes = [{
  path: 'home',
  component: HomeComponent,
}];

注：配置好后就可以把app-routing 中的Home組件配置移除了。

3. 補充Home組模塊的子組件并配置子路由

• 執行一下命令創建子組件

• ng g c pages/home/children/user-list

• ng g c pages/home/children/user-detail

• ng g c pages/home/children/edit-user

• 為Home路由器配置增加children屬性來配置子組件路由

const routes: Routes = [{
  ...
  children: [
    {
      path: 'list',
      component: UserListComponent,
    },
    {
      path: 'detail',
      component: UserDetailComponent,
    },
    {
      path: 'edit',
      component: EditUserComponent,
    },
    {
      path: '',
      redirectTo: '/home/list',
      pathMatch: 'full'
    }
  ]
}];

• 同根組件一樣配置子模塊路由出口

<div>
  <a [routerLink]="['/home/list']">列表</a>｜
  <a [routerLink]="['/home/edit']">編輯</a>｜
  <a [routerLink]="['/home/detail']">詳情</a>
</div>
<!-- 配置路由出口 -->
<router-outlet></router-outlet>

路由傳參

1. 在路由定義時配置需要攜帶的參數令牌

• 格式: 在路由配置的path后補充格式為/:key的令牌占位

{
  path: 'detail/:id',
  component: UserDetailComponent
}

注：這種將令牌插入到路由path中進行占位的方式中id是必須攜帶的參數。

• 通過routerLink攜帶參數

<a [routerLink]="['/hero', hero.id]">

• 在Angular獲取路由參數需要用到ActivatedRoute:

使用ActivatedRoute前要在目標組件進行注入

• 方式1: 獲取參數(路由參數變化可以被監聽，適用于同一組件實例多次復用的情況)

this.route.paramMap.subscribe(
  (params: ParamMap) => {
    console.log('id :>> ', params.get('id'));
  }
)

• 方式2: 獲取參數(只獲取到初始值)

const id = this.route.snapshot.paramMap.get('id')!;

ParamMap API：

2. 通過Router的navigate跳轉頁面

當前組件注入Router對象

• 無參數攜帶跳轉：

this.router.navigate(['/home/list']);

• 攜帶參數跳轉：

this.router.navigate(['/home/list', { id: this.userId, name: this.userName }]);

注：矩陣URL標記法：;id=101;name=bom

懶加載

懶加載的目的是將模塊的掛載延遲到我們使用的時候，避免首次打開頁面就進行整體加載導致頁面長時間不可用。

1. 配置無組件路由（空路由）

對路由進行分組而不增加額外的路徑片段

{
    path: 'home',
    loadChildren: () =>
      import('./pages/home/home.module').then((m) => m.HomeModule),
}

2. 移除根模塊中關于Home模塊的導入,使得模塊完整分離

微調home-routing中home組件的path配置為""

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  children: [
    ...
  ]
}];

3. 與懶加載相對的預加載

angular中配置懶加載后模塊的加載被延遲到來使用時，但是有一些組件是需要優先加載并在使用的時候可以及時運行。

angular中的Router模塊提供來兩種預加載的策略：

• 完全不預加載，這是默認值。惰性加載的特性區仍然會按需加載。

• 預加載所有惰性加載的特性區。

• 修改方式：RouterModule.forRoot()的參數二的對象支持設置加載模式的屬性preloadingStrategy，

• PreloadAllModules： 預加載有所模塊

• NoPreloading: 默認，不進行預加載

• 這么雞肋的屬性必須要支持自定義，我們來看一下：

• 在需要預加載的路由配置對象中添加data對象并增加preload屬性，值設置為true表示開啟預加載。

• 通過cli來生成一個服務用來完成我們的預加載策略：ng generate service selective-preloading-strategy

• 將我們創建的服務實現接口PreloadingStrategy

• 自定義的策略和默認支持的兩種策略使用方法一致。

import { Injectable } from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SelectivePreloadingStrategyService implements PreloadingStrategy {
  preloadedModules: string[] = [];

  preload(route: Route, fn: () => Observable<any>): Observable<any> {
    // 通過檢查路由配置來決定是否做預加載
    if (route.data && route.data.preload && route.path != null) {
      // 參數1: 要加載的路由
      this.preloadedModules.push(route.path);
      // 參數2: 加載器
      return fn();
    } else {
      return of(null);
    }
  }
}

到此，關于“Angular中是如何使用路由的”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！