Angular2官网项目 (4)--路由
行動(dòng)計(jì)劃
????
-
把AppComponent變成應(yīng)用程序的“殼”，它只'處理導(dǎo)航'
-
把現(xiàn)在由AppComponent關(guān)注的英雄們移到一個(gè)獨(dú)立的GeneralComponent中
-
添加路由
-
創(chuàng)建一個(gè)新的DashboardComponent組件
-
把儀表盤(pán)加入導(dǎo)航結(jié)構(gòu)中
路由是導(dǎo)航的另一個(gè)名字。路由器就是從一個(gè)視圖導(dǎo)航到另一個(gè)視圖的機(jī)制。
拆分Appcomponent.
????
????????現(xiàn)在的應(yīng)用會(huì)加載AppComponent組件，并且立刻顯示出英雄列表。
????????我們修改后的應(yīng)用將提供一個(gè)殼，它會(huì)選擇儀表盤(pán)和英雄列表視圖之一，然后默認(rèn)顯示它。
??AppComponent組件應(yīng)該只處理導(dǎo)航。 我們來(lái)把英雄列表的顯示職責(zé)，從AppComponent移到GeneralComponent組件中。
GeneralComponent組件
AppComponent的職責(zé)已經(jīng)被移交給GeneralComponent了。 與其把AppComponent中所有的東西都搬過(guò)去，不如索性把它改名為GeneralComponent，然后單獨(dú)創(chuàng)建一個(gè)新的AppComponent殼。
????????步驟：
????????????????1.把a(bǔ)pp.component.ts 和app.component.html 和app.component.scss移入到General文件夾下。
????????????????2.app改為generals
????????????????3.類名AppComponent改為GeneralsComponent
????????????????4.選擇器名稱app-root改為my-general
創(chuàng)建AppComponent
新的AppComponent將成為應(yīng)用的“殼”。 它將在頂部放一些導(dǎo)航鏈接，并且把我們要導(dǎo)航到的頁(yè)面放在下面的顯示區(qū)中。
?????????????????????在./app下創(chuàng)建app.component.ts
-
添加支持性的import語(yǔ)句。
-
定義一個(gè)導(dǎo)出的?AppComponent類。
-
在類的上方添加@Component元數(shù)據(jù)裝飾器，裝飾器帶有app-root選擇器。
-
將下面的項(xiàng)目從HeroesComponent移到AppComponent：
-
title類屬性
-
@Component模板中的<h1>標(biāo)簽，它包含了對(duì)title屬性的綁定。
-
在模板的標(biāo)題下面添加<my-heroes>標(biāo)簽，以便我們?nèi)阅芸吹接⑿哿斜怼?/p>
-
添加GeneralComponent組件到根模塊的declarations數(shù)組中，以便 Angular 能認(rèn)識(shí)<my-generals>標(biāo)簽。
-
添加GeneralService到AppModule的providers數(shù)組中，因?yàn)槲覀兊拿恳粋€(gè)視圖都需要它。
-
從GeneralComponent的providers數(shù)組中移除GeneralService，因?yàn)樗惶岬侥K了。
-
為AppComponent添加一些import語(yǔ)句。
./app/app.component.ts
import { Component } from '@angular/core';
?
@Component({
? selector: 'app-root',
? template: `
? ? <my-generals></my-generals>
? `
})
export class AppComponent {
}
./app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } ? from '@angular/forms';
import {GeneralService} from'./general.service';
//注冊(cè)指令--->用法類似于組件
import {HighlightDirective} from '../directive/drag.directive';
//測(cè)試管道所用的組件
import {HeroBirthdayComponent} from "../Pipes/hero-birthday1.component";
import {ExponentialStrengthPipe} from "../Pipes/exponential-strength.pipe"
import {GeneralsComponent} from './general/generals.component';
import { AppComponent } from './app.component';
import {GeneralDetailComponent} from './general/general-detail.component';
@NgModule({
? //列出程序中的組件
? declarations: [
? ? AppComponent,
? ? GeneralDetailComponent,
? ? ? GeneralsComponent,
??
? ? // HighlightDirective,
? ? // HeroBirthdayComponent,
? ? // ExponentialStrengthPipe
? ],
? //導(dǎo)入模塊
? imports: [
? /*BrowserModule，每個(gè)運(yùn)行在瀏覽器中的應(yīng)用都必須導(dǎo)入它。
? ? ? ?BrowserModule注冊(cè)了一些關(guān)鍵的應(yīng)用“服務(wù)”提供商。 它還包括了一些通用的指令，
? ? ? ?例如NgIf和NgFor，所以這些指令在該模塊的任何組件模板中都是可用的。?
? ?*/
? ? BrowserModule,
? //雙向數(shù)據(jù)綁定依賴的模塊
? ? FormsModule
? ],
? providers: [GeneralService],
? /*@NgModule.bootstrap屬性把這個(gè)AppComponent標(biāo)記為引導(dǎo) (bootstrap) 組件。?
? ? 當(dāng) Angular 引導(dǎo)應(yīng)用時(shí)，它會(huì)在 DOM 中渲染AppComponent，并把結(jié)果放進(jìn)index.html的<app-root>元素標(biāo)記內(nèi)部。 ?
? */
? bootstrap: [AppComponent]
})
export class AppModule { }
./app/general/generals.component.ts
import { Component,OnInit} from '@angular/core';
import {General} ?from "../../bean/General";
import {GeneralService} from'../general.service';
@Component({
? selector: 'my-generals',
? templateUrl: './generals.component.html',
? styleUrls: ['./generals.component.scss']
})
export class GeneralsComponent implements OnInit {
? title = 'MY General';
? // generals:General[]=Generals;
? ?color="pink";
? ?constructor(private generalService:GeneralService ){
? ?}
?selectGeneral:General;
? generals:General[];
? getGenerals():void{
? ? this.generalService.getGenerals()
? ? .then(generals=>this.generals=generals);
? }
? ngOnInit(){
? ? ? this.getGenerals();
? }
? oSelect(item:General):void{
?? this.selectGeneral=item;
? }
}
添加路由
????????
我們希望在用戶點(diǎn)擊按鈕之后才顯示英雄列表，而不是自動(dòng)顯示。 換句話說(shuō)，我們希望用戶能“導(dǎo)航”到英雄列表。
我們要使用 Angular?路由器進(jìn)行導(dǎo)航。
Angular 路由器是一個(gè)可選的外部 Angular NgModule，名叫RouterModule。 路由器包含了多種服務(wù)(RouterModule)、多種指令(RouterOutlet、RouterLink、RouterLinkActive)、 和一套配置(Routes)。我們將先配置路由。
<base href>?組件
????打開(kāi)src/index.html
????????????確保它的<head>區(qū)頂部有一個(gè)<base href="...">元素（或動(dòng)態(tài)生成該元素的腳本）
????
????配置路由 ./app/app.module.ts
????????????a.導(dǎo)入路由所需要的模塊
????????????????????import { RouterModule } ? from '@angular/router';
????????????b.在imports下寫(xiě)入 ? ????
?????RouterModule.forRoot([
????? ? ? ? {
????? ? ? ? ? path: 'generals',
????? ? ? ? ? component: GeneralsComponent
????? ? ? ? }
????? ? ? ])
這個(gè)Routes是一個(gè)路由定義的數(shù)組。 此時(shí)，我們只有一個(gè)路由定義，但別急，后面還會(huì)添加更多。
路由定義包括以下部分：
-
Path: 路由器會(huì)用它來(lái)匹配瀏覽器地址欄中的地址，如generals。
-
Component: 導(dǎo)航到此路由時(shí)，路由器需要?jiǎng)?chuàng)建的組件（GeneralsComponent）。
這里使用了forRoot()方法，因?yàn)槲覀兪窃趹?yīng)用根部提供配置好的路由器。?forRoot()方法提供了路由需要的“”路由服務(wù)提供商和指令”，并基于當(dāng)前瀏覽器 URL 初始化導(dǎo)航。
路由出口(Outlet)
如果我們把路徑/generals粘貼到瀏覽器的地址欄，路由器會(huì)匹配到'Generals'路由，并顯示GeneralsComponent組件。 我們必須告訴路由器它位置，所以我們把<router-outlet>標(biāo)簽添加到模板的底部。?RouterOutlet是由RouterModule提供的指令之一。 當(dāng)我們?cè)趹?yīng)用中導(dǎo)航時(shí)，路由器就把激活的組件顯示在<router-outlet>里面。
路由器鏈接
我們當(dāng)然不會(huì)真讓用戶往地址欄中粘貼路由的 URL， 而應(yīng)該在模板中的什么地方添加一個(gè)錨標(biāo)簽。點(diǎn)擊時(shí)，就會(huì)導(dǎo)航到GeneralsComponent組件。
? <a routerLink="/generals">Generals</a>
注意，錨標(biāo)簽中的[routerLink]綁定。 我們把RouterLink指令（ROUTER_DIRECTIVES中的另一個(gè)指令）綁定到一個(gè)字符串。 它將告訴路由器，當(dāng)用戶點(diǎn)擊這個(gè)鏈接時(shí)，應(yīng)該導(dǎo)航到哪里。
由于這個(gè)鏈接不是動(dòng)態(tài)的，我們只要用一次性綁定的方式綁定到路由的路徑 (path)?就行了。 回來(lái)看路由配置表，我們清楚的看到，這個(gè)路徑 ——?'/heroes'就是指向HeroesComponent的那個(gè)路由的路徑。
現(xiàn)在./app/app.component.ts
????
import { Component } from '@angular/core';
?
@Component({
? selector: 'app-root',
? template: `
? ?<a routerLink="/generals">Generals</a>
? ?<router-outlet></router-outlet>
? `
})
export class AppComponent {
}
AppComponent現(xiàn)在加上了路由器，并能顯示路由到的視圖了。 因此，為了把它從其它種類的組件中區(qū)分出來(lái)，我們稱這類組件為路由器組件。
添加一個(gè)儀表盤(pán)
當(dāng)我們有多個(gè)視圖的時(shí)候，路由才有意義。所以我們需要另一個(gè)視圖。先創(chuàng)建一個(gè)DashboardComponent的占位符，讓用戶可以導(dǎo)航到它或從它導(dǎo)航出來(lái)。
????在./src/app下創(chuàng)建dashboard文件夾
????????????在這下面創(chuàng)建dashboard.component.ts
import { Component } from '@angular/core';
@Component({
? selector: 'my-dashboard',
? template: '<h3>My Dashboard</h3>'
})
export class DashboardComponent { }
我們先不實(shí)現(xiàn)他
配置儀表盤(pán)路由
要讓app.module.ts能導(dǎo)航到儀表盤(pán)，就要先導(dǎo)入儀表盤(pán)組件，然后把下列路由定義添加到Routes數(shù)組中。
?{
? ? ? ? ? path: 'dashboard',
? ? ? ? ? component: DashboardComponent
? ? ? ? },
然后還得把DashboardComponent添加到AppModule的declarations數(shù)組中。
? DashboardComponent
添加重定向路由
瀏覽器啟動(dòng)時(shí)地址欄中的地址是/。 當(dāng)應(yīng)用啟動(dòng)時(shí)，它應(yīng)該顯示儀表盤(pán)，并且在瀏覽器的地址欄顯示URL：/dashboard，把下列路由定義添加到Routes數(shù)組中。
? {
? ? ? ? ? path: '',
? ? ? ? ? redirectTo: '/dashboard',
? ? ? ? ? pathMatch: 'full'
? ? ? ? },
添加導(dǎo)航到模版中
在模板上添加一個(gè)到儀表盤(pán)的導(dǎo)航鏈接，就放在Generals（英雄列表）鏈接的上方。
? ?<a routerLink="/generals">Generals</a>
? ? <a routerLink="/dashboard">Dashboard</a>
? ?<router-outlet></router-outlet>
刷新瀏覽器。應(yīng)用顯示出了儀表盤(pán)，并可以在儀表盤(pán)和英雄列表之間導(dǎo)航了。
把英雄添加到儀表盤(pán)
? ?????讓儀表盤(pán)變得有趣。
把元數(shù)據(jù)中的template屬性替換為templateUrl屬性，它將指向一個(gè)新的模板文件。
templateUrl: './dashboard.component.html'
增加styleUrls:['./dashboard.component.scss']
dashboard.component.htm ?
<h3>Top Generals</h3>
<div>
? <div *ngFor="let general of generals" class="col-1-4">
? ? <div>
? ? ? <h4>`general`.`name`</h4>
? ? </div>
? </div>
</div>
我們?cè)俅问褂?/span>*ngFor來(lái)在英雄列表上迭代，并顯示它們的名字。 還添加了一個(gè)額外的<div>元素，來(lái)幫助稍后的美化工作。
dashboard.component.ts
import { Component,OnInit} from '@angular/core';
import {General} ?from "../../bean/General";
import {GeneralService} from'../general.service';
@Component({
? selector: 'my-dashboard',
? templateUrl: './dashboard.component.html',
? styleUrls:['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {?
generals:General[];
constructor(private generalService:GeneralService){}
ngOnInit(){
this.generalService.getGenerals().then(generals=>this.generals=generals.slice(1,5));
}
}
我們?cè)谥暗腉eneralsComponent中也看到過(guò)類似的邏輯：
-
創(chuàng)建一個(gè)generals數(shù)組屬性。
-
在構(gòu)造函數(shù)中注入GeneralService，并且把它保存在一個(gè)私有的generalService字段中。
-
在 Angular 的ngOnInit生命周期鉤子里面調(diào)用服務(wù)來(lái)獲得英雄數(shù)據(jù)。
在儀表盤(pán)中我們用Array.slice方法提取了四個(gè)英雄（第2、3、4、5個(gè)）。
刷新瀏覽器，在這個(gè)新的儀表盤(pán)中就看到了四個(gè)英雄。
導(dǎo)航到英雄詳情
雖然我們?cè)贖eroesComponent組件的底部顯示了所選英雄的詳情， 但用戶還沒(méi)法導(dǎo)航到GeneralDetailComponent組件。我們可以用下列方式導(dǎo)航到GeneralDetailComponent：
-
從Dashboard（儀表盤(pán)）導(dǎo)航到一個(gè)選定的英雄。
-
從Generals（英雄列表）導(dǎo)航到一個(gè)選定的英雄。
-
把一個(gè)指向該英雄的“深鏈接” URL 粘貼到瀏覽器的地址欄。
路由到一個(gè)英雄詳情
我們將在app.module.ts中添加一個(gè)到GeneralDetailComponent的路由，也就是配置其它路由的地方。
這個(gè)新路由的不尋常之處在于，我們必須告訴GeneralDetailComponent該顯示哪個(gè)英雄。 之前，我們不需要告訴GeneralsComponent組件和DashboardComponent組件任何東西
參數(shù)化路由
我們可以把英雄的id添加到 URL 中。當(dāng)導(dǎo)航到一個(gè)id為 11 的英雄時(shí)，我們期望的 URL 是這樣的：
????/detail/11
URL中的/detail/部分是固定不變的，但結(jié)尾的數(shù)字id部分會(huì)隨著英雄的不同而變化。 我們要把路由中可變的那部分表示成一個(gè)參數(shù) (parameter)?或令牌 (token)?，代表英雄的id。
配置帶參數(shù)的路由
?{
? ? ? ? ? path: 'detail/:id',
? ? ? ? ? component: GeneralDetailComponent
? ? ? ? },
路徑中的冒號(hào) (:) 表示:id是一個(gè)占位符，當(dāng)導(dǎo)航到這個(gè)GeneralDetailComponent組件時(shí)，它將被填入一個(gè)特定英雄的id。
修改GeneralDetailComponent
模板不用修改，我們會(huì)用原來(lái)的方式顯示英雄。導(dǎo)致這次大修的原因是如何獲得這個(gè)英雄的數(shù)據(jù)。
我們不會(huì)再?gòu)母附M件的屬性綁定中接收英雄數(shù)據(jù)。 新的GeneralDetailComponent?應(yīng)該從ActivatedRoute服務(wù)的可觀察對(duì)象params中取得id參數(shù)， 并通過(guò)GeneralService服務(wù)獲取具有這個(gè)指定id的英雄數(shù)據(jù)。
先添加下列導(dǎo)入語(yǔ)句：
import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Location } ? ? ? ? ? ? ? ? from '@angular/common';
import 'rxjs/add/operator/switchMap';
import {GeneralService} from'../general.service';
然后注入ActivatedRoute和HeroService服務(wù)到構(gòu)造函數(shù)中，將它們的值保存到私有變量中：
? constructor( private generalService: GeneralService,
? private route: ActivatedRoute,
? private location: Location){}
在ngOnInit()生命周期鉤子中，我們從ActivatedRoute服務(wù)的可觀察對(duì)象params中提取id參數(shù)， 并且使用GeneralService來(lái)獲取具有這個(gè)id的英雄數(shù)據(jù)。
?ngOnInit(){
?? ?this.route.paramMap
? ? .switchMap((params: ParamMap) => this.generalService.getGeneral(+params.get('id')))
? ? .subscribe(general => this.general = general);
? }
添加?GeneralService.getGeneral()
在前面的代碼片段中GeneralService沒(méi)有getGeneral()方法。要解決這個(gè)問(wèn)題，請(qǐng)打開(kāi)GeneralService并添加一個(gè)getGenera()方法，它會(huì)根據(jù)id從getGenerals()中過(guò)濾英雄列表。
etGeneral(id: number): Promise<General> {
? ?return this.getGenerals()
? ? ? ? ? ? ?.then(generals => generals.find(general => general.id === id));
}
回到原路
一個(gè)goBack()方法，它使用之前注入的Location服務(wù)， 利用瀏覽器的歷史堆棧，導(dǎo)航到上一步。
?goBack(): void {
? ?this.location.back();
? }
然后，我們通過(guò)一個(gè)事件綁定把此方法綁定到模板底部的?Back（后退）按鈕上。
<button (click)="goBack()">Back</button>
選擇一個(gè)儀表盤(pán)中的英雄
當(dāng)用戶從儀表盤(pán)中選擇了一位英雄時(shí)，本應(yīng)用要導(dǎo)航到GeneralDetailComponent以查看和編輯所選的英雄。
雖然儀表盤(pán)英雄被顯示為像按鈕一樣的方塊，但是它們的行為應(yīng)該像錨標(biāo)簽一樣。 當(dāng)鼠標(biāo)移動(dòng)到一個(gè)英雄方塊上時(shí)，目標(biāo) URL 應(yīng)該顯示在瀏覽器的狀態(tài)條上，用戶應(yīng)該能拷貝鏈接或者在新的瀏覽器標(biāo)簽頁(yè)中打開(kāi)英雄詳情視圖。
要達(dá)到這個(gè)效果，再次打開(kāi)dashboard.component.html，將用來(lái)迭代的<div *ngFor...>替換為<a>，就像這樣：
刷新瀏覽器，并從儀表盤(pán)中選擇一位英雄，應(yīng)用就會(huì)直接導(dǎo)航到英雄的詳情。
重構(gòu)路由為一個(gè)模塊
AppModule中有將近 20 行代碼是用來(lái)配置四個(gè)路由的。 絕大多數(shù)應(yīng)用有更多路由，并且它們還有守衛(wèi)服務(wù)來(lái)保護(hù)不希望或未授權(quán)的導(dǎo)航。 ?路由的配置可能迅速占領(lǐng)這個(gè)模塊，并掩蓋其主要目的，即為 Angular 編譯器設(shè)置整個(gè)應(yīng)用的關(guān)鍵配置。
我們應(yīng)該重構(gòu)路由配置到它自己的類。 什么樣的類呢？ 當(dāng)前的RouterModule.forRoot()產(chǎn)生一個(gè)Angular?ModuleWithProviders，所以這個(gè)路由類應(yīng)該是一種模塊類。 它應(yīng)該是一個(gè)路由模塊
按約定，路由模塊的名字應(yīng)該包含 “Routing”，并與導(dǎo)航到的組件所在的模塊的名稱看齊。
在app.module.ts所在目錄創(chuàng)建app-routing.module.ts文件。將下面從AppModule類提取出來(lái)的代碼拷貝進(jìn)去：
import { NgModule } ? ? ? ? ? ? from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
?
import {GeneralsComponent} from './general/generals.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import {GeneralDetailComponent} from './general/general-detail.component';
const routes: Routes = [
? { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
? { path: 'dashboard', ?component: DashboardComponent },
? { path: 'detail/:id', component: GeneralDetailComponent },
? { path: 'generals', ? ? component: GeneralsComponent }
];
?
@NgModule({
? imports: [ RouterModule.forRoot(routes) ],
? exports: [ RouterModule ]
})
export class AppRoutingModule {}
-
將路由抽出到一個(gè)變量中。如果你將來(lái)要導(dǎo)出這個(gè)模塊，這種 "路由模塊" 的模式也會(huì)更加明確。
-
添加RouterModule.forRoot(routes)到imports。
-
把RouterModule添加到路由模塊的exports中，以便關(guān)聯(lián)模塊（比如AppModule）中的組件可以訪問(wèn)路由模塊中的聲明，比如RouterLink?和?RouterOutlet。
-
無(wú)declarations！聲明是關(guān)聯(lián)模塊的任務(wù)。
-
如果有守衛(wèi)服務(wù)，把它們添加到本模塊的providers中（本例子中沒(méi)有守衛(wèi)服務(wù)）。
修改?AppModule
刪除AppModule中的路由配置，并導(dǎo)入AppRoutingModule?（使用 ES?import語(yǔ)句導(dǎo)入，并將它添加到NgModule.imports列表）。
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } ? from '@angular/forms';
import {GeneralService} from'./general.service';
//路由所需要的核心模塊
import { RouterModule } ? from '@angular/router';
//路由模塊
import {AppRoutingModule} from './app-routing.module'
//注冊(cè)指令--->用法類似于組件
import {HighlightDirective} from '../directive/drag.directive';
//測(cè)試管道所用的組件
import {HeroBirthdayComponent} from "../Pipes/hero-birthday1.component";
import {ExponentialStrengthPipe} from "../Pipes/exponential-strength.pipe"
import {GeneralsComponent} from './general/generals.component';
import {DashboardComponent} from './dashboard/dashboard.component';
import { AppComponent } from './app.component';
import {GeneralDetailComponent} from './general/general-detail.component';
@NgModule({
? //列出程序中的組件
? declarations: [
? ? AppComponent,
? ? GeneralDetailComponent,
? ? ? GeneralsComponent,
? ? ? DashboardComponent
? ? // HighlightDirective,
? ? // HeroBirthdayComponent,
? ? // ExponentialStrengthPipe
? ],
? //導(dǎo)入模塊
? imports: [
? /*BrowserModule，每個(gè)運(yùn)行在瀏覽器中的應(yīng)用都必須導(dǎo)入它。
? ? ? ?BrowserModule注冊(cè)了一些關(guān)鍵的應(yīng)用“服務(wù)”提供商。 它還包括了一些通用的指令，
? ? ? ?例如NgIf和NgFor，所以這些指令在該模塊的任何組件模板中都是可用的。?
? ?*/
? ? BrowserModule,
? //雙向數(shù)據(jù)綁定依賴的模塊
? ? FormsModule,
? ?//路由模塊
? ? AppRoutingModule
? ],
? providers: [GeneralService],
? /*@NgModule.bootstrap屬性把這個(gè)AppComponent標(biāo)記為引導(dǎo) (bootstrap) 組件。?
? ? 當(dāng) Angular 引導(dǎo)應(yīng)用時(shí)，它會(huì)在 DOM 中渲染AppComponent，并把結(jié)果放進(jìn)index.html的<app-root>元素標(biāo)記內(nèi)部。 ?
? */
? bootstrap: [AppComponent]
})
export class AppModule { }
在?GeneralsComponent中選擇一位英雄 ? ?
添加?mini 版英雄詳情
? 在<div class="controller"> ?添加如下代碼?
????<div class="row">
???? <div *ngIf="selectGeneral">
???? ??<h2>
???? ?? ?{{selectGeneral.name | uppercase}} is my hero
???? ??</h2>
???? ??<button (click)="gotoDetail()">View Details</button>
???? </div>
???? </div>
更新 GeneralsComponent類
點(diǎn)擊按鈕時(shí)，GeneralsComponent導(dǎo)航到GeneralDetailComponent。 該按鈕的點(diǎn)擊事件綁定到了gotoDetail()方法，它使用命令式的導(dǎo)航，告訴路由器去哪兒。
該方法需要對(duì)組件類做一些修改：
從 Angular 路由器庫(kù)導(dǎo)入Router
在構(gòu)造函數(shù)中注入Router（與HeroService一起）
實(shí)現(xiàn)gotoDetail()，調(diào)用路由器的navigate()方法
具體代碼
import { Component,OnInit} from '@angular/core';
import { Router } from '@angular/router';
import {General} ?from "../../bean/General";
import {GeneralService} from'../general.service';
@Component({
? selector: 'my-generals',
? templateUrl: './generals.component.html',
? styleUrls: ['./generals.component.scss']
})
export class GeneralsComponent implements OnInit {
? title = 'MY General';
? // generals:General[]=Generals;
? ?color="pink";
? ?constructor(private generalService:GeneralService,private router: Router){
? ?}
?selectGeneral:General;
? generals:General[];
? getGenerals():void{
? ? this.generalService.getGenerals()
? ? .then(generals=>this.generals=generals);
? }
? ngOnInit(){
? ? ? this.getGenerals();
? }
? oSelect(item:General):void{
?? this.selectGeneral=item;
? }
? gotoDetail(): void {
? ? this.router.navigate(['/detail', this.selectGeneral.id]);
? }
??
}
刷新瀏覽器，并開(kāi)始點(diǎn)擊。 我們能在應(yīng)用中導(dǎo)航：從儀表盤(pán)到英雄詳情再回來(lái)，從英雄列表到 mini 版英雄詳情到英雄詳情，再回到英雄列表。 我們可以在儀表盤(pán)和英雄列表之間跳來(lái)跳去。
本文轉(zhuǎn)自 沉迷學(xué)習(xí)中 51CTO博客，原文鏈接：http://blog.51cto.com/12907581/1967223，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者
總結(jié)
以上是生活随笔為你收集整理的Angular2官网项目 (4)--路由的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： c#获取当前应用程序所在路径
- 下一篇： lenos快速开发脚手架