Angular4學(xué)習(xí)筆記router的簡(jiǎn)單使用

router，也就是路由，是前端中一個(gè)比較重要的概念。通過(guò)router把特定的地址和對(duì)應(yīng)的頁(yè)面關(guān)聯(lián)后分離出來(lái)，以達(dá)到解耦的目的。在src/app目錄下新建一個(gè)detail的文件夾，建立一個(gè)名為gundam-detail.component的文件。

import { Component } from '@angular/core';
import { Gundam } from '../../model/gundam';
@Component({
  template: `
    <div *ngIf="selectedGundam">
    <span>{{selectedGundam.name}}</span>
    <span>{{selectedGundam.type}}</span>
    </div>
  `
})
export class GundamDetailComponent {
    selectedGundam: Gundam;
}

ps：有關(guān)命名，基本上是采用xxx+“-”+“業(yè)務(wù)類型”+“組件類型”的命名方式，至少官方文檔上是這么推薦的。當(dāng)然給組件起名叫豬頭三也可以，但是標(biāo)準(zhǔn)的命名可以增加組件的可讀性。即便是不介意隨意起名坑后來(lái)的維護(hù)者，誰(shuí)也不能確定很長(zhǎng)時(shí)間以后自己不會(huì)再對(duì)同一段代碼進(jìn)行重構(gòu)。所以，做人還是要厚道。不寫注釋也就算了，起名還是規(guī)范一點(diǎn)好。

ps2：有關(guān)分包的方式，有的人喜歡把view放一起、controller放一起，再根據(jù)邏輯進(jìn)一步細(xì)分；也有人是倒過(guò)來(lái)，先分邏輯再分view和controller。這個(gè)好像沒(méi)有什么統(tǒng)一的定論，我個(gè)人是喜歡后一種，所以本項(xiàng)目采用后一種分法。

目前文件里沒(méi)什么東西，只是簡(jiǎn)單的把a(bǔ)pp.component.ts里的temple給搬過(guò)來(lái)而已。

先明確需求，再開(kāi)始寫router。

需求：點(diǎn)擊gundam列表頁(yè)面中的任意item，可以跳轉(zhuǎn)到該gundam的詳情頁(yè)。

作為angular的組件，希望在頁(yè)面中使用router，必須先在app.module.ts里聲明。

ps：之前的業(yè)務(wù)和app.module.ts沒(méi)什么關(guān)系，但這并不是說(shuō)它不重要。app.module.ts相當(dāng)于android的mainifist文件，對(duì)整個(gè)項(xiàng)目進(jìn)行統(tǒng)籌管理。

打開(kāi)app.module.ts：

1. imports：在組件頁(yè)面里用到基礎(chǔ)類。
2. declarations：現(xiàn)有custom組件聲明。
3. bootstrap：可以理解為Android的main launch，項(xiàng)目啟動(dòng)時(shí)從那個(gè)組件進(jìn)入。

需要使用router前先引入：

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

因?yàn)橐{(diào)用RouterModule的forRoot方法，RouterModule.forRoot 又是項(xiàng)目中用到的基礎(chǔ)類，所以需要寫在imports里。

 imports: [
  BrowserModule,
  FormsModule,
  RouterModule.forRoot()
 ],

RouterModule.forRoot 接受兩個(gè)參數(shù)，第一個(gè)是route數(shù)組來(lái)表明跳轉(zhuǎn)，第二個(gè)參數(shù)常年忽略，我也不知道有什么用。

route類包括2個(gè)比較關(guān)鍵的屬性：path和component，通過(guò)訪問(wèn)path，可以找到唯一的component。

在forRoot里添加上包含主頁(yè)和詳情頁(yè)2個(gè)component的route數(shù)組。

RouterModule.forRoot([
  {
    path: '',
    component: AppComponent
  },
  {
    path: '',
    component: GundamDetailComponent
  }
])

app.module.ts現(xiàn)在看起來(lái)是這樣的：

import {
NgModule
} from '@angular/core';
import {
BrowserModule
} from '@angular/platform-browser';
import {
FormsModule
} from '@angular/forms';
import { RouterModule }  from '@angular/router';
import {
AppComponent
} from './component/appcomponent/app.component';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: '',
        component: AppComponent
      },
      {
        path: '',
        component: GundamDetailComponent
      }
      ])
  ],
  declarations: [
    AppComponent,
    GundamDetailComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

2個(gè)path都還空著，因?yàn)檫€少一個(gè)關(guān)鍵的東西，就算寫上也會(huì)報(bào)錯(cuò)：

Error: Cannot find primary outlet to load ‘AppComponent'

在angular里，router是要搭配標(biāo)簽router-outlet來(lái)使用的，換句話說(shuō)router決定顯示哪個(gè)組件，而由router-outlet決定顯示在哪里。

在app.component.ts里的template加上標(biāo)簽

<router-outlet></router-outlet>

然后不出意外的顯示了2個(gè)主頁(yè):

app.component.ts是一個(gè)組件也是一個(gè)頁(yè)面，angular先從bootstrap里進(jìn)入了app.component.ts渲染了界面（也就是router-outlet上面的部分）。碰到又去找router，發(fā)現(xiàn)對(duì)應(yīng)的router也有組件，于是又加載了一遍。

所以為了正常顯示，也要把主頁(yè)也單獨(dú)抽出來(lái)。所有組件通過(guò)app.component.ts里的來(lái)進(jìn)行加載。而app.component.ts作為整個(gè)demo的最外層容器可以進(jìn)行一些公共的操作（典型：后退動(dòng)作）。

在src下新建host包，新建gundam-host.component.ts文件。
基本上可以把整個(gè)app挪過(guò)來(lái)，刪除掉out標(biāo)簽，刪掉selector(暫時(shí)用不到)。

import {
Component
} from '@angular/core';
import { Gundam } from '../../model/gundam';
import { GUNDAMS } from './../../service/data';
@Component({
  template: `
    <div *ngFor="let gundam of gundams" (click)="onSelected(gundam)">
      <span>
        {{gundam.name}}
      </span>
    </div>
  `
})
export class GundamHostComponent {
  gundam: Gundam = {
    name: '海牛',
    type: 'NewType'
  };
  gundams = GUNDAMS;
  selectedGundam: Gundam; // 定義一個(gè)selectedGudam作為展示詳情的變量
  onSelected (gundam: Gundam): void {
    this.selectedGundam = gundam; // 通過(guò)參數(shù)賦值
  }
}

app.component.ts只保留標(biāo)簽，其他一概去掉。

修改app.module.ts文件，導(dǎo)入gundam-host.component.ts并把GundamHostComponent 增加到組件聲明declarations里。

修改route里的path所指向的component，默認(rèn)進(jìn)入后顯示主頁(yè)組件：

before

after

path的值為”(空字符串)的表示不需要增加子路徑。

修改詳情頁(yè)的路徑:

{
  path: 'detail',
  component: GundamDetailComponent
}

在主頁(yè)里增加跳轉(zhuǎn)連接:

點(diǎn)擊跳轉(zhuǎn)(路徑已改變)

現(xiàn)在點(diǎn)擊主頁(yè)的高達(dá)列表的item后，可以跳轉(zhuǎn)到一個(gè)空白的詳情頁(yè)。之所以是空白，是因?yàn)樵斍轫?yè)的值是需要由主頁(yè)進(jìn)行傳遞的?，F(xiàn)在主頁(yè)詳情頁(yè)分家以后，需要通過(guò)路由來(lái)進(jìn)行值傳遞。

傳值的方法有很多種，甚至可以傳的值也有很多種。
目前我先用最笨的方法：將gundam類轉(zhuǎn)化為一個(gè)字符串，將字符串傳遞到詳情頁(yè)面后再轉(zhuǎn)化為gundam類。

在app.component.ts文件的class里添加函數(shù)：

parseGundamToString(gundam: Gundam): string {
  return gundam.name + '&' + gundam.type;
} // 將gundam類轉(zhuǎn)化為固定格式的字符串

修改app.component.ts文件的template，訪問(wèn)gundam路徑時(shí)轉(zhuǎn)化傳遞轉(zhuǎn)化過(guò)的gundam字符串

<div *ngFor="let gundam of gundams" routerLink="/detail/name=parseGundamToString(gundam)">
  <span>
  {{gundam.name}}
  </span>
</div>

修改詳情頁(yè)的path

{
  path: 'detail/:gundam',
  component: GundamDetailComponent
}

/:gundam 是一個(gè)占位符，又是參數(shù)說(shuō)明。表示傳遞過(guò)來(lái)的參數(shù)屬性是gundam。

這樣在detail文件中，就可以從url的連接中拿到傳遞過(guò)來(lái)的高達(dá)字符串。

獲得這個(gè)字符串的時(shí)機(jī)，應(yīng)該是在在detail頁(yè)面初始化的時(shí)候。Angular提供了所謂的的“鉤子”(hook)，用來(lái)標(biāo)示component的活動(dòng)周期—其實(shí)也就是是類似于Android里onStart或者onCreate一樣的方法。

在gundam-detail.component.ts的中添加OnInit鉤子,或者說(shuō)接口：

import { Component, OnInit } from '@angular/core';

在class后面加implements關(guān)鍵詞和OnInit來(lái)實(shí)現(xiàn)該接口：

export class GundamDetailComponent implements OnInit {
  selectedGundam: Gundam ;
  ngOnInit(): void {
  }
}

剩下的事情，就是讀取連接上傳來(lái)的參數(shù)就可以了。

讀取連接上傳遞的參數(shù)還是要用到router里的幾個(gè)類，所以需要在detail里導(dǎo)入。

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

導(dǎo)入完成后，通過(guò)在構(gòu)造器里注入的方式進(jìn)行調(diào)用：

（有關(guān)注入，現(xiàn)在暫時(shí)沒(méi)有說(shuō)到）

constructor(
private route: ActivatedRoute){}

angular會(huì)自動(dòng)創(chuàng)建ActivatedRoute的實(shí)例。

先在ngOnInit里輸出看看params是什么

this.route.params.switchMap((params: Params) => console.log(params))

ps：switchMap是angular官方給的拿取url參數(shù)的方法，也是需要預(yù)先導(dǎo)入才可以使用：

import 'rxjs/add/operator/switchMap';

ps2: 有關(guān)箭頭函數(shù)

(params: Params) => this.gundamStr = params['gundam']

是一個(gè)箭頭函數(shù),等同于

function(params){
  this.gundamStr = params['gundam']
}

其中params是switchMap的返回值，返回的即是通過(guò)路由連接傳遞過(guò)來(lái)的參數(shù)所在的類。

ps3: 箭頭函數(shù)真的是整個(gè)ES6里最惡心的東西，之一。

控制臺(tái)中 輸出：

傳遞過(guò)來(lái)的參數(shù)，是一個(gè)gundam類格式化輸出的字符串，所以還要在detail里補(bǔ)充一個(gè)反格式化字符串到gundam類的函數(shù)。

parseStringToGundam(str: string): Gundam {
  const temp = str.split('&');
  const tempGundam: Gundam = {
  name: temp[0],
  type: temp[1]
  };
  return tempGundam;
}

最終,獲得detail的初始化是這個(gè)樣子的

ngOnInit(): void {
  this.route.params // 通過(guò)注入的方式拿到route里的參數(shù)params
  .switchMap((params: Params) => this.gundamStr = params['gundam']) // 通過(guò)參數(shù)拿到gundam字符串并付給detail里的一個(gè)臨時(shí)變量
  .subscribe(() => this.selectedGundam = this.parseStringToGundam(this.gundamStr)); // 通過(guò)反格式化函數(shù)解析臨時(shí)變量并返回給作為顯示的model
}

移動(dòng)web頁(yè)面間傳值確實(shí)沒(méi)有什么太好的方法，angular和react都是如此。以前我們的做法是短的參數(shù)直接掛連接傳走，長(zhǎng)的大的或者object的參數(shù)就先保存本地，然后第二個(gè)頁(yè)面再?gòu)谋镜刈x取。

但是像android那樣扔一個(gè)intent里直接就過(guò)去了的方式，確實(shí)沒(méi)有。

回首頁(yè)：

點(diǎn)擊一個(gè)列表：

包結(jié)構(gòu)：

總的來(lái)說(shuō)，業(yè)務(wù)被分開(kāi)了，結(jié)構(gòu)干凈多了。雖然現(xiàn)在還體現(xiàn)不出來(lái)，但是寫到后來(lái)就覺(jué)得心花怒放，磨刀不誤砍柴工功啊。

作為router，也可以分離的。

目前我的項(xiàng)目里只有2個(gè)頁(yè)面，如果多起來(lái)-比如20來(lái)個(gè)，那么app.module.ts又會(huì)變的亂七八糟。

所以要把router也給扔出去。

新建一個(gè)文件app-routing.module.ts，然后把footRoot平移過(guò)來(lái)(帶上引用)。

在app-routing.module.ts文件里，也需要ngModul。個(gè)人理解ngModul就相當(dāng)于一個(gè)基類指示器，導(dǎo)出class后以便被其他類引用。

import {
NgModule
} from '@angular/core';
import { RouterModule }  from '@angular/router';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
import { GundamHostComponent } from './component/host/gundam-host.component';
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: '',
        component: GundamHostComponent
      },
      {
        path: 'detail/:id',
        component: GundamDetailComponent
      }
    ])
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

然后既然已經(jīng)有了這個(gè)類，可以導(dǎo)入到app.module.ts里使用使得整個(gè)文件看起來(lái)清爽一些。

import {
NgModule
} from '@angular/core';
import {
BrowserModule
} from '@angular/platform-browser';
import {
FormsModule
} from '@angular/forms';
import {
AppComponent
} from './component/appcomponent/app.component';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
import { GundamHostComponent } from './component/host/gundam-host.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule // 調(diào)用路由
  ],
  declarations: [
    AppComponent,
    GundamDetailComponent,
    GundamHostComponent
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

當(dāng)然，官方文檔又進(jìn)行了進(jìn)一步簡(jiǎn)化。

既然forRoot是一個(gè)Route數(shù)組，那么數(shù)組也可以單獨(dú)抽出來(lái)，當(dāng)然進(jìn)一步抽取也可以放到另一個(gè)文件里。

import {
NgModule
} from '@angular/core';
import { RouterModule, Route }  from '@angular/router';
import { GundamDetailComponent } from './component/detail/gundam-detail.component';
import { GundamHostComponent } from './component/host/gundam-host.component';
const routes: Route[] = [
  {
    path: '',
    component: GundamHostComponent
  },
  {
    path: 'detail/:gundam',
    component: GundamDetailComponent
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

我個(gè)人比較偷懶，就先抽取到這一步。

現(xiàn)在連主頁(yè)面和詳情頁(yè)面都被分開(kāi)了，項(xiàng)目的耦合度又進(jìn)一步降低。

再接再厲，我們繼續(xù)把業(yè)務(wù)邏輯給也分離出來(lái)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。