Angular路由——路由基礎

starof發表於2018-05-07

Angular路由

一、路由相關物件

Router和RouterLink作用一樣，都是導航。Router是在Controller中用的，RouterLink是在模版中用到。

二、路由物件的位置

1、Routes物件

配置在模組中。Routes由一組配置資訊組成，每個配置資訊至少包含兩個屬性，Path和Component。

2、RouterOutlet

在模版中

3、RouterLink

指令，在模版中生成連結改變URL

4、Router

在Controller中，呼叫Router物件的navigate方法，路由切換。

5、ActivatedRoute

路由時候通過URL傳遞資料，資料會儲存在ActivatedRoute物件中。

三、路由配置

使用ng new --routing引數時候會多生成出來一個app-routing.module.ts檔案

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

const routes: Routes = [];

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

會自動imports到app.module.ts中。

生成兩個元件home元件和component元件。

const routes: Routes = [
  {path: '', component : HomeComponent}, //路徑為空
  {path: 'product', component: ProductComponent}
];

注意：

1、path路徑配置不能以斜槓開頭，不能配置成path:'/product'。

因為Angular路由器會解析和生成url，不用/開頭是為了在多個檢視之間導航時能自由的使用相對路徑和絕對路徑。

2、在模版中寫路徑時，必須用/開頭。

因為用斜槓加.表示要導航到根路由(/)還是子路由(./)。

/就是導航到根路由，從配置根路由那一層找。

<a [routerLink]="['/']">主頁</a>

3、在<router-outlet>下面顯示元件內容

4、routerLink引數是一個陣列而不是字串

因為在路由時候可以傳遞引數。

四、程式碼中通過Router物件導航

模版上加一個按鈕

<input type="button" value="商品詳情" (click)="toProductDetails()">

controller中使用router.navigate導航。

navigate引數和routerLink引數配置一樣。

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private router:Router){
  }
  toProductDetails(){
    this.router.navigate(['/product']);
  }
}

點按鈕和點連結效果一樣。

五、配置不存在的路徑

生成code404元件顯示頁面不存在。

路由匹配先匹配者優先，所以**萬用字元路由要放最後。

const routes: Routes = [
  { path: '', component: HomeComponent }, //路徑為空
  { path: 'product', component: ProductComponent },
  { path: '**', component: Code404Component }
];

六、重定向路由

一個地址重定向到另一個指定元件

www.aaa.com => www.aaa.com/products

www.aaa.com/x => www.aaa.com/y 使用者可能已經收藏了x地址。

用重定向路由

const routes: Routes = [
  { path: '', redirectTo : 'home', pathMatch:'full' }, //路徑為空
  { path: 'home', component: HomeComponent },
  { path: 'product', component: ProductComponent },
  { path: '**', component: Code404Component }
];