常見路由任務

本主題講述當把 Angular 路由器添加到應用中時，如何實現(xiàn)多種常見路由任務。

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

生成一個支持路由的應用

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

ng new routing-app --routing --defaults

為路由添加組件

為了使用 Angular 的路由器，應用至少要有兩個組件才能從一個導航到另一個。要使用 CLI 創(chuàng)建組件，請在命令行輸入以下內容，其中 ?first ?是組件的名稱：

ng generate component first

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

ng generate component second

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

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

導入這些新組件

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

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

定義一個基本路由

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

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

Angular CLI 會為你執(zhí)行這一步驟。但是，如果要手動創(chuàng)建應用或使用現(xiàn)存的非 CLI 應用，請驗證導入和配置是否正確。下面是使用 ?--routing? 標志生成的默認 ?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 ?導入到你的路由模塊中。

Angular CLI 會自動執(zhí)行這一步驟。CLI 還為你的路由設置了 ?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ù)組中定義你的路由。

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

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

3. 把這些路由添加到你的應用中。

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

Angular Router App

路由順序

路由的順序很重要，因為 ?Router ?在匹配路由時使用“先到先得”策略，所以應該在不那么具體的路由前面放置更具體的路由。首先列出靜態(tài)路徑的路由，然后是一個與默認路由匹配的空路徑路由。通配符路由是最后一個，因為它匹配每一個 URL，只有當其它路由都沒有匹配時，?Router ?才會選擇它。

獲取路由信息

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

可以用一個路由把這種類型的信息傳給你的應用組件。要做到這一點，你可以使用 ?ActivatedRoute ?接口。

要從路由中獲取信息：

1. 把 ?ActivatedRoute ?和 ?ParamMap ?導入你的組件。

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

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

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

constructor(
  private route: ActivatedRoute,
) {}

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

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

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

設置通配符路由

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

要設置通配符路由，請在 ?routes ?定義中添加以下代碼。

{ path: '**', component:  }

這兩個星號 ?**? 告訴 Angular，這個 ?routes ?定義是通配符路由。對于 component 屬性，你可以使用應用中的任何組件。常見的選擇包括應用專屬的 ?PageNotFoundComponent?，你可以定義它來向用戶展示 404 頁面，或者跳轉到應用的主組件。通配符路由是最后一個路由，因為它匹配所有的 URL。

顯示 404 頁面

要顯示 404 頁面，請設置一個通配符路由，并將 ?component ?屬性設置為你要用于 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 與前面列出的路徑不匹配，路由器會選擇這個路由，并把該用戶送到 ?PageNotFoundComponent?。

設置重定向

要設置重定向，請使用重定向源的 ?path?、要重定向目標的 ?component ?和一個 ?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
];

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

嵌套路由

隨著你的應用變得越來越復雜，你可能要創(chuàng)建一些根組件之外的相對路由。這些嵌套路由類型稱為子路由。這意味著你要為你的應用添加第二 ??，因為它是 ?AppComponent ?之外的另一個 ??。

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