詳解Angular之路由基礎

更新時間：2021年05月24日 09:57:56 作者：starof

單頁應用中，組件時構建應用的基礎元素，頁面展示什么內(nèi)容均是靠頁面有什么組件決定的，而展示什么組件又是由一組路由（帶有Url元素的特定集合，可用于導航視圖）決定的，希望本文可以幫助讀者了解路由的基礎概念和基礎使用、寫法。

一、路由相關對象

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

二、路由對象的位置

1、Routes對象

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

2、RouterOutlet

在模版中

3、RouterLink

指令，在模版中生成鏈接改變URL

4、Router

在Controller中，調(diào)用Router對象的navigate方法，路由切換。

5、ActivatedRoute

路由時候通過URL傳遞數(shù)據(jù)，數(shù)據(jù)會保存在ActivatedRoute對象中。

三、路由配置

使用ng new --routing參數(shù)時候會多生成出來一個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>下面顯示組件內(nèi)容

4、routerLink參數(shù)是一個數(shù)組而不是字符串

因為在路由時候可以傳遞參數(shù)。

四、代碼中通過Router對象導航

模版上加一個按鈕

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

controller中使用router.navigate導航。

navigate參數(shù)和routerLink參數(shù)配置一樣。

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組件顯示頁面不存在。

路由匹配先匹配者優(yōu)先，所以**通配符路由要放最后。

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 用戶可能已經(jīng)收藏了x地址。

用重定向路由

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