常見路由任務(wù)

本主題講述當(dāng)把 Angular 路由器添加到應(yīng)用中時(shí)，如何實(shí)現(xiàn)多種常見路由任務(wù)。

成都創(chuàng)新互聯(lián)是專業(yè)的富源網(wǎng)站建設(shè)公司，富源接單;提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行富源網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

生成一個(gè)支持路由的應(yīng)用

下面的命令會(huì)用 Angular CLI 來生成一個(gè)帶有應(yīng)用路由模塊（?AppRoutingModule?）的基本 Angular 應(yīng)用，它是一個(gè) NgModule，可用來配置路由。下面的例子中應(yīng)用的名字是 ?routing-app?。

ng new routing-app --routing --defaults

為路由添加組件

為了使用 Angular 的路由器，應(yīng)用至少要有兩個(gè)組件才能從一個(gè)導(dǎo)航到另一個(gè)。要使用 CLI 創(chuàng)建組件，請?jiān)诿钚休斎胍韵聝?nèi)容，其中 ?first ?是組件的名稱：

ng generate component first

為第二個(gè)組件重復(fù)這個(gè)步驟，但給它一個(gè)不同的名字。這里的新名字是 ?second?。

ng generate component second

CLI 會(huì)自動(dòng)添加 ?Component ?后綴，所以如果在編寫 ?first-component?，那么其組件名就是 ?FirstComponentComponent?。

本指南適用于 CLI 生成的 Angular 應(yīng)用。如果你是手動(dòng)工作的，請確保你的 index.html 文件的 ?
? 中有 ?
? 語句。這里假定 ?
app ?文件夾是應(yīng)用的根目錄，并使用 ?
"/"? 作為基礎(chǔ)路徑。

導(dǎo)入這些新組件

要使用這些新組件，請把它們導(dǎo)入到該文件頂部的 ?AppRoutingModule ?中，具體如下：

import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';

定義一個(gè)基本路由

創(chuàng)建路由有三個(gè)基本的構(gòu)建塊。

把 ?AppRoutingModule ?導(dǎo)入 ?AppModule ?并把它添加到 ?imports ?數(shù)組中。

Angular CLI 會(huì)為你執(zhí)行這一步驟。但是，如果要手動(dòng)創(chuàng)建應(yīng)用或使用現(xiàn)存的非 CLI 應(yīng)用，請驗(yàn)證導(dǎo)入和配置是否正確。下面是使用 ?--routing? 標(biāo)志生成的默認(rèn) ?AppModule?。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. 把 ?RouterModule ?和 ?Routes ?導(dǎo)入到你的路由模塊中。

Angular CLI 會(huì)自動(dòng)執(zhí)行這一步驟。CLI 還為你的路由設(shè)置了 ?Routes ?數(shù)組，并為 ?@NgModule()? 配置了 ?imports ?和 ?exports ?數(shù)組。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; // CLI imports router

const routes: Routes = []; // sets up routes constant where you define your routes

// configures NgModule imports and exports
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. 在 ?Routes ?數(shù)組中定義你的路由。

這個(gè)數(shù)組中的每個(gè)路由都是一個(gè)包含兩個(gè)屬性的 JavaScript 對象。第一個(gè)屬性 ?path ?定義了該路由的 URL 路徑。第二個(gè)屬性 ?component ?定義了要讓 Angular 用作相應(yīng)路徑的組件。

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
];

3. 把這些路由添加到你的應(yīng)用中。

現(xiàn)在你已經(jīng)定義了路由，可以把它們添加到應(yīng)用中了。首先，添加到這兩個(gè)組件的鏈接。把要添加路由的鏈接賦值給 ?routerLink ?屬性。將屬性的值設(shè)置為該組件，以便在用戶點(diǎn)擊各個(gè)鏈接時(shí)顯示這個(gè)值。接下來，修改組件模板以包含 ?? 標(biāo)簽。該元素會(huì)通知 Angular，你可以用所選路由的組件更新應(yīng)用的視圖。

Angular Router App

路由順序

路由的順序很重要，因?yàn)?nbsp;?Router ?在匹配路由時(shí)使用“先到先得”策略，所以應(yīng)該在不那么具體的路由前面放置更具體的路由。首先列出靜態(tài)路徑的路由，然后是一個(gè)與默認(rèn)路由匹配的空路徑路由。通配符路由是最后一個(gè)，因?yàn)樗ヅ涿恳粋€(gè) URL，只有當(dāng)其它路由都沒有匹配時(shí)，?Router ?才會(huì)選擇它。

獲取路由信息

通常，當(dāng)用戶導(dǎo)航你的應(yīng)用時(shí)，你會(huì)希望把信息從一個(gè)組件傳遞到另一個(gè)組件。例如，考慮一個(gè)顯示雜貨商品購物清單的應(yīng)用。列表中的每一項(xiàng)都有一個(gè)唯一的 ?id?。要想編輯某個(gè)項(xiàng)目，用戶需要單擊“編輯”按鈕，打開一個(gè) ?EditGroceryItem ?組件。你希望該組件得到該商品的 ?id?，以便它能向用戶顯示正確的信息。

可以用一個(gè)路由把這種類型的信息傳給你的應(yīng)用組件。要做到這一點(diǎn)，你可以使用 ?ActivatedRoute ?接口。

要從路由中獲取信息：

1. 把 ?ActivatedRoute ?和 ?ParamMap ?導(dǎo)入你的組件。

import { Router, ActivatedRoute, ParamMap } from '@angular/router';

這些 import 語句添加了組件所需的幾個(gè)重要元素。

2. 通過把 ?ActivatedRoute ?的一個(gè)實(shí)例添加到你的應(yīng)用的構(gòu)造函數(shù)中來注入它：

constructor(
  private route: ActivatedRoute,
) {}

3. 更新 ?ngOnInit()? 方法來訪問這個(gè) ?ActivatedRoute ?并跟蹤 ?name ?參數(shù)：

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.name = params['name'];
  });
}

注意：前面的例子使用了一個(gè)變量 ?name?，并根據(jù) ?name ?參數(shù)給它賦值。

設(shè)置通配符路由

當(dāng)用戶試圖導(dǎo)航到那些不存在的應(yīng)用部件時(shí)，在正常的應(yīng)用中應(yīng)該能得到很好的處理。要在應(yīng)用中添加此功能，需要設(shè)置通配符路由。當(dāng)所請求的 URL 與任何路由器路徑都不匹配時(shí)，Angular 路由器就會(huì)選擇這個(gè)路由。

要設(shè)置通配符路由，請?jiān)?nbsp;?routes ?定義中添加以下代碼。

{ path: '**', component:  }

這兩個(gè)星號 ?**? 告訴 Angular，這個(gè) ?routes ?定義是通配符路由。對于 component 屬性，你可以使用應(yīng)用中的任何組件。常見的選擇包括應(yīng)用專屬的 ?PageNotFoundComponent?，你可以定義它來向用戶展示 404 頁面，或者跳轉(zhuǎn)到應(yīng)用的主組件。通配符路由是最后一個(gè)路由，因?yàn)樗ヅ渌械?nbsp;URL。

顯示 404 頁面

要顯示 404 頁面，請?jiān)O(shè)置一個(gè)通配符路由，并將 ?component ?屬性設(shè)置為你要用于 404 頁面的組件，如下所示：

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];

?path ?為 ?**? 的最后一條路由是通配符路由。如果請求的 URL 與前面列出的路徑不匹配，路由器會(huì)選擇這個(gè)路由，并把該用戶送到 ?PageNotFoundComponent?。

設(shè)置重定向

要設(shè)置重定向，請使用重定向源的 ?path?、要重定向目標(biāo)的 ?component ?和一個(gè) ?pathMatch ?值來配置路由，以告訴路由器該如何匹配 URL。

const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];

在這個(gè)例子中，第三個(gè)路由是重定向路由，所以路由器會(huì)默認(rèn)跳到 ?first-component? 路由。注意，這個(gè)重定向路由位于通配符路由之前。這里的 ?path: ''? 表示使用初始的相對 URL（ ?''? ）。

嵌套路由

隨著你的應(yīng)用變得越來越復(fù)雜，你可能要?jiǎng)?chuàng)建一些根組件之外的相對路由。這些嵌套路由類型稱為子路由。這意味著你要為你的應(yīng)用添加第二 ??，因?yàn)樗?nbsp;?AppComponent ?之外的另一個(gè) ??。

在這個(gè)例子中，還有兩個(gè)子組件，?child-a? 和 ?child-b?。這里的 ?FirstComponent ?有它自己的 ?