Angular2 - Starter - Routes, Route Resolver
在基于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的RouterModule RouterModule ], 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，则跳转到logon
if(clientUser === null){
me.router.navigate(['./logon']);
resolve(null);
}else{
//获取所有feedback
me.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;
}
});
}
}
