angular 8 配置路由

一、生成路由文件

 按照慣例，有一個獨立模塊來配置相關路由，這個模塊類的名字叫做AppRoutingModule,位於src/app下的app-routing.module.ts文件中。

使用CLI生成它。

ng generate module app-routing --flat --module=app

然后查看src/app目錄下是否生成成功。

接下來，我們查看生成的文件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class AppRoutingModule { }

通常不會在路由模塊中聲明組件，所以可以刪除@NgModule.declarations 並刪除對 CommonModule 的引用。

二、導出 RouterModule

此刻的AppRoutingModule是這樣的：

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

@NgModule({
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

三、添加路由定義

典型的Angular路由（Route）有兩個屬性：

1、path：一個用於匹配瀏覽器地址欄中URL的字符串。

2、component：當導航到此路由時，路由應該創建哪個組件。

如果說你希望當URL為http://localhost:4200/homePage時，首先要導入HomePageComponent；以便在Route中引用它。

如下：

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {HomePageComponent} from "../home-page/home-page.component";

const routes: Routes = [
  { path: 'homePage', component: HomePageComponent }
];
@NgModule({
  exports: [RouterModule]
})
export class AppRoutingModule { }

RouterModule.forRoot()

 初始化路由器，並讓它開始監聽瀏覽器的地址變化。（添加到 @NgModule.imports 數組中）

imports: [ RouterModule.forRoot(routes) ],

注意：

查看app.module.ts文件中是否有引入AppRoutingModule。

import { AppRoutingModule } from './app-routing/app-routing.module';

imports: [
    AppRoutingModule
  ],

四、添加路由出口

 打開AppComponent的模板，把<router-outlet>添加進去，<router-outlet>會告訴路由器要在哪里顯示路由的試圖。

<router-outlet></router-outlet>   // src/app/app.component.html

五、運行項目

查看項目頁面，注意你的CLI命令行是否仍在運行：

ng serve

地址欄輸入http://localhost:4200，這個時候你會看到地址欄顯示着項目的標題，但是並沒有顯示HomePageComponent中的內容。

六、添加默認路由

方法一：當啟動項目時，瀏覽器的地址欄指向的是網站的根路徑。它沒有匹配到任何現存路由，因此路由器也不會導航到任何地方。

要讓應用自動導航到這個儀表盤，請把下列路由添加到AppRoutingModule.routes數組中。

{ path: '', redirectTo: '/homePage', pathMatch: 'full' },

現在再次訪問項目，你會發現地址欄默認會把一個空路徑重定向到'/homePage'的路由；並且首頁也加載了HomePageComponent。

方法二：

{ path: '**', component:DashboardComponent}

意思就是當路由URL等於’’時，會去加載DashboardComponent組件；所以你運行你的服務端口號：localhost:4200首先加載的就會是這個組件；

**路徑是一個通配符，表示除了以上幾種path,任何的路徑都會加載DashboardComponent組件，這個記得寫在路由配置最后。

七、添加路由鏈接(routerLink)

不應該讓用戶只能把路由的 URL 粘貼到地址欄中。他們還應該能通過點擊鏈接進行導航。

添加一個 <nav> 元素，並在其中放一個鏈接 <a>元素，當點擊它時，就會觸發一個到 DetailsComponent 的導航。

<div>
  home-page works!
  <nav>
    <a routerLink="/details">點擊查看詳情</a>
  </nav>
</div>

同時需要把DetailsComponent引入到AppRoutingModule中。

點擊查看詳情這個鏈接。地址欄變成了/details，並且頁面跳轉到詳情頁。

八、添加詳情視圖（HTML傳參）

現在假設我們首頁展示的是一個文章列表，然后我們需要點擊每一遍文章查看詳情；如果說我們要導航到id為11的文章詳情視圖，類似於http://localhost:4200/heroes/11的URL。

首先打開AppRoutingModule並導入HeroesComponent。

import {HeroesComponent} from "./heroes/heroes.component";

然后把一個參數化路由添加到 AppRoutingModule.routes 數組中，它要匹配指向文章詳情視圖的路徑。

{ path: 'heroes/:id', component: HeroesComponent }

path 中的冒號（:）表示 :id 是一個占位符，它表示某個特定英雄的 id。

此刻，路由就准備就緒了。

然后，我們需要修改HTML頁面中的文章列表跳轉鏈接，讓它們能夠通過參數化的路由進行導航到文章詳情頁面。

<nav>
    <a routerLink="/heroes/{{id}}">點擊查看文章詳情</a>
    <!--數組格式傳參-->
    <a [routerLink]="['/heroes', num]">點擊查看文章詳情</a>
</nav>

現在我們刷新頁面點擊查看文章詳情，你發現，地址欄已經更改為http://localhost:4200/heroes/11，頁面展示也已經跳轉到文章詳情頁面模塊。

九、js頁面跳轉（傳參）

當你在AppRoutingModule導入了HeroesComponent，並且把一個參數化路由添加到 AppRoutingModule.routes 數組中。

我們現在需要通過js傳參跳轉到HeroesComponent（幾個常用的方法）：

 1、先添加下列導入語句：

import { Router } from '@angular/router';//引入

 然后把 ActivatedRoute注入到構造函數中，將它們的值保存到私有變量里：

constructor( private router: Router) { }//注入到構造函數

 2、傳遞路由參數

單參傳遞

navigate()該方法支持的參數類型和routerLink指令一樣，所以它們的作用也是一樣的：

this.router.navigate(['heroes', id]);

或者：

this.router.navigate(['heroes']);

多參傳遞

this.router.navigate(['heroDetail'], {queryParams: {productId: '1',title: 'moon'}

3、我們注意到還有一個：navigateByUrl（），這個叫做絕對路由；

this.router.navigateByUrl('home');

區別：navigateByUrl（）和navigate（）的區別點是：navigateByUrl不是根據參數來確定路由地址的。

十、從路由參數中提取id

 1、先添加下列導入語句：

import { ActivatedRoute } from '@angular/router';

 然后把 ActivatedRoute注入到構造函數中，將它們的值保存到私有變量里：

constructor(
  private route: ActivatedRoute,
) {}

ActivatedRoute 保存着到這個 HeroDetailComponent 實例的路由信息。 這個組件對從 URL 中提取的路由參數感興趣。 其中的 id 參數就是要顯示的英雄的 id。

2、獲取路由參數

方法一：

 this.route.queryParams.subscribe(queryParams => {
        let productId = queryParams.productId;
        let title = queryParams.title;
    });

方法二：

 代碼如下：

  public params;  //公有變量
  ngOnInit() {
    this.getData();
  }
  getData() {
     this.route.params.subscribe(
       params => {
          this.params = params;
          console.log(this.params);
       }
    );
  }

這樣獲取的是一個對象，直接獲取id就可以了。

方法三：

代碼如下：

ngOnInit(): void {
  this.getData();
}

getData(): void {
  const id = +this.route.snapshot.paramMap.get('id');
  console.log(id);
}

十一、回到原路

 1、先添加下列導入語句：

import { Location } from '@angular/common';

然后把 Location 服務注入到構造函數中，將它們的值保存到私有變量里：

constructor(
  private location: Location
) {}

location 是一個 Angular 的服務，用來與瀏覽器打交道。 稍后，你就會使用它來導航回上一個視圖。

2、點擊返回頁面：

通過點擊瀏覽器的后退按鈕，可以回到上一個也買你進入的頁面。

把一個后退按鈕添加到組件模板的底部，並且把它綁定到組件的 goBack() 方法。

<button (click)="goBack()">go back</button>

在組件類中添加一個 goBack() 方法，利用注入的Location 服務在瀏覽器的歷史棧中后退一步。

goBack(): void {
  this.location.back();
}