在基于Angualr的SPA中，路由是一個很重要的部分，它幫助我們更方便的實現頁面上區域的內容的動態加載，不同tab的切換，同時及時更新瀏覽器地址欄的URN，使瀏覽器回退和前進能導航到歷史訪問的頁面。

(1) 基本配置

1.1.配置base href

在配置RoutesModule之前，我們需要再index.html里配置base href，這樣，每一個路由的路徑的前綴都是base href，應用的圖片，文件夾，樣式等資源都通過該base href來定位。

//index.html
<base href='/'></base>

　　

1.2.配置應用路由

//app.routes.ts
export const ROUTES: Routes = [ //根路徑，通過base url:127.0.0.1:8888訪問LogOnComponent，{ path: '', component: LogOnComponent },{ path: 'chats', component: ChatsComponent },{ path: 'logon', component: LogOnComponent },{ path: 'fresh', component: FreshComponent }, /*base url下的路由，如果在初始化路由時使用hash:通過127.0.0.1:8888/#/friends訪問 如果不使用hash，則通過127.0.0.1:8888/friends訪問 */{ path: 'friends',component: FriendsComponent },{path: 'other', //在訪問127.0.0.1:8888/#/other時，再去加載一個模塊，這就加快了應用初始化的速度loadChildren: () => System.import('./components/sections/+detail').then((comp: any) => comp.default),}, /*在跳轉到任何一個路由之前會實例化該組件，若成功（找到目標路由），則跳轉到目標路由 若失敗，則跳轉到 NoContentComponent ，我們可以將它理解為錯誤路由時需要跳轉到的位置 */{ path: '**', component: NoContentComponent }, ];

　　

1.3.在應用模塊中加載路由

//app.module.ts
import { ROUTES } from './app.routes'; import {RouterModule, NoPreloading} from '@angular/router'; @NgModule({bootstrap: [ AppComponent ],imports: [/*使用RouterModule.forRoot方法將路由配置加載到base url, useHash:true,則urn在瀏覽器顯示為http://127.0.0.1:8083/#/friends useHash:false,則urn在瀏覽器顯示為http://127.0.0.1:8083/friends 但其實，angular路由跳轉都不會刷新整個頁面，而是動態加載各個模塊 enableTracing:true,在瀏覽器的輸出窗口輸出當前跳轉操作的詳細信息，如： NavigationEnd(id: 2, url: '/friends', urlAfterRedirects: '/friends')， preloadingStrategy: NoPreloading,允許組件懶加載，當應用加載成功之后，加載器便監聽懶加載的路由的訪問事件，一旦訪問就去加載對應組件或模塊 */RouterModule.forRoot(ROUTES, { useHash: false,enableTracing:false, preloadingStrategy: NoPreloading })] })

　　

(2) 子模塊的路由

2.1 建立子模塊

//detail.module.ts import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { NgModule } from '@angular/core'; import { DetailComponent } from './detail.component'; import { FeedbackComponent } from '../../parts/feedback'; import { FeedbackRoutingModule } from './routing/feedback-routing.module'; import {AboutComponent} from "../about/about.component"; //裝飾一個NgModule @NgModule({declarations: [ //引入該子模塊的組件DetailComponent,FeedbackComponent,AboutComponent],imports: [ //此處導入CommonModule，而不是app.module中使用的BrowserModule， //如果BrowserModule被導入，就會報如下錯誤,可見BrowserModule用于加載根模塊，CommonModule用于在懶加載的模塊中提供angular的基本指令 /*Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead. */CommonModule,FormsModule, //導入路由模塊FeedbackRoutingModule] }) export default class OtherModule {}

　　

2.2 建立子應用模塊的路由模塊

//detail-routing.module.ts
import { ROUTES } from './feedback-routing.routes'; @NgModule({imports:[ //使用RouterModule.forChild加載子路由模塊RouterModule.forChild(ROUTES)],exports:[ //導出的DetailRoutingModule 中攜帶一個加載了ROUTES的RouterModuleRouterModule],providers:[PeopleSvc, //到如一些作為服務的提供商MemberShipResolver] }) export class DetailRoutingModule{}

　　

2.3 配置子模塊內部的路由

//detail-routing.routes.ts import { Routes } from '@angular/router'; import { FeedbackComponent } from '../../../../components/parts/feedback'; import { DetailComponent } from '../detail.component'; import { AboutComponent } from '../../about/about.component'; import { MemberShipResolver } from '../../../../services/membership-resolver.service'; export const ROUTES:Routes = [{ //應用子模塊路徑path:'',data:{title:'Other'},component:DetailComponent,outlet:'primary',resolve: {pageInfo: MemberShipResolver}, //子路由children:[{ path:'logon',redirectTo:'' },{path: 'feedback',component: FeedbackComponent, /*定義實例化FeedbackComponent時的數據，可通過當前的ActivatedRoute對象來訪問到 this.route.data.getValue() */data:{title:'User feedback'} ,resolve: {userInfoResult: MemberShipResolver}},{path:'about',component:AboutComponent}]} ];

　　

(3) 路由分析器

Router Resolver其實是一個服務，在跳轉到某個路由時，該service可獲取到當前ActivatedRoute，獲取其攜帶的data，這里可以提前去服務端獲取一些數據，或者做一些數據轉換之后再進行組件的實例化和渲染。比如，當用戶將要跳轉到應用的反饋頁面填寫反饋時，我們可以通過一個membership-resolver去檢查是否為登錄用戶，如果不是，則跳轉到登錄頁面，如果是則顯示歷史反饋和反饋填寫表單入口。

3.1 建立membership-resolver

//membership-resolver.service.ts import { Injectable } from '@angular/core'; import { FeedbackSvc } from './feedbackSvc'; import {Router, RouterStateSnapshot, ActivatedRouteSnapshot, Resolve} from "@angular/router"; import {ClientState} from "./client-state.service"; @Injectable() export class MemberShipResolver implements Resolve<string>{ //clientState:ClientState 該服務提供當前登錄用戶的信息constructor(private router: Router,private peopleSvc:PeopleSvc,private clientState:ClientState) {}//實現 Resolve接口的resolve方法 resolve(route:ActivatedRouteSnapshot,state:RouterStateSnapshot):Promise<string>{let me = this;let clientUser = this.clientState.get('user');let prom = new Promise(function(resolve,reject){ //如果當前登錄用戶為null，則跳轉到logonif(clientUser === null){me.router.navigate(['./logon']);resolve(null);}else{ //獲取所有feedbackme.feedbackSvc.getAll().then((data)=>{if(data !== null){resolve(data);}else{resolve(null);}});}});return prom;} }

　　

?

3.2 制定分析器解析的數據標識

//feedback.routing.ts
{path: 'feedback',component: FeedbackComponent,data:{title:'User feedback'} ,resolve: { //定義feedbackResult的分析器，該分析器異步返回的數據將添加到data下feedbackResult: MemberShipResolver} }

　　

3.3 監控分析器數據變化

//feedback.component.ts import { Component } from '@angular/core'; import { FeedbackSvc } from './feedbackSvc'; import {Router, ActivatedRoute} from "@angular/router"; import {Feedback} from "../../../models/business/Feedback"; import {User} from "../../../models/business/User"; import {ClientState} from "../../../services/client-state.service"; @Component({selector:'feedback',templateUrl:'feedback.component.html',styleUrls:[ 'feedback.component.css' ],providers:[ FeedbackSvc ] })export class FeedbackComponent{private allFeedback:Feedback[] = [];constructor(public feedbackSvc:FeedbackSvc, private router: Router,private route:ActivatedRoute,private client:ClientState){}ngOnInit() {let _this = this; //注冊當前路由攜帶的數據的變化回調this.route.data.subscribe((data:Feedback[]) => {if(data !== null){ //將分析器返回的數據作為component的數據_this.allFeedback = data;}});} }

　　

?

?

轉載于:https://www.cnblogs.com/wzcblogs/p/6290119.html

總結

以上是生活随笔為你收集整理的Angular2 - Starter - Routes, Route Resolver的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。