angular4路由 知道這些就夠用了

angular 4 路由

使用cli命令建立根路由模塊 ng g cl app.router 或本身建一個路由配置文件 如:app/app.router.ts

// app/app.router.ts
// 將文件修改成

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

const routes: Routes = [
  // 之後在這裏改動配置
  { path: '**', pathMatch: 'full', redirectTo: '' }
];
// 將路由配置導出爲 appRouting 以供調用, 子模塊中的路由使用 forChild 而不是 forRoot
export const appRouting = RouterModule.forRoot(routes);

在根模塊中引入路由, 爲特性模塊定義的路由在其模塊中引入

// app/app.module.ts
import { appRouting } from "./router/router.module"
// @NgModule({
//  imports: [ ... ,
  appRouting
// ...

路由配置

const routes: Routes = [
  // path:路徑 /news component:組件
  { path: 'news',  component: Newsomponent },
  // path:路徑 /detail/1 component:組件
  { path: 'detail/:id', component: DetailComponent },
  // 懶加載子模塊, 子模塊須要配置路由設置啓動子組件
  { path: 'other', loadChildren:"./other/other.module#otherModule" },
  // 重定向
  { path: '**', pathMatch: 'full', redirectTo: '' }
];

• pathMatch?: string; 默認爲前綴匹配 "prefix"; "full" 爲徹底匹配

• outlet?: string; 路由目標

• children?: Routes; 子路由的規則

加載路由

在根組件或當前組件的模板中

<router-outlet></router-outlet>

多個路由區域

{ path: 'news', outlet:'let1'  component: NewsComponent }
  { path: 'news', outlet:'let2'  component: News2Cmponent }

<router-outlet name="let1"></router-outlet>
<router-outlet name="let2"></router-outlet>

即訪問 /news/ 時同時加載 NewsComponent 和 News2Cmponent 兩個組件

連接及訪問

<a routerLink="/detail/1" routerLinkActive="active">detail</a>
<a [routerLink]="['/detail', news.id]">{{news.title}}</a>
<a [routerLink]="[{ outlets: { let2: ['news'] } }]">Contact</a>

routerLinkActive="active" 即在本路由激活時添加樣式 .active

或

import { Router } from '@angular/router';
// ...
constructor(private router: Router) {}

// ...

this.router.navigate(['/detail', this.news.id])
this.router.navigate([{ outlets: { let2: null }}]);

navigateByUrl 方法指向完整的絕對路徑

路由守衛

適用於後臺管理等須要登陸才能使用的模塊

建立一個認證服務

// app/auth.service.ts

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';

@Injectable()
export class AuthService implements CanActivate {
  canActivate() {
    // 這裏判斷登陸狀態, 返回 true 或 false
    return true;
  }
}

添加或修改路由配置

// app/app.router.ts

// 增長 CanActivate
import { CanActivate ... } from '@angular/router';


  // 配置中增長 canActivate 如:
  { path: 'admin', canActivate:[AuthService] ... }

退出守衛

適合於編輯器修改後的保存提示等場景

// app/deac.service.ts

import { Injectable }     from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot }    from '@angular/router';

// CanDeactivateComponent 是定義的接口,見下段代碼
import { CanDeactivateComponent } from './can-deactivate.omponent';

@Injectable()
export class DeacService implements CanDeactivate<CanDeactivateComponent> {
  canDeactivate(
    canDeactivateComponent: CanDeactivateComponent,
    activatedRouteSnapshot: ActivatedRouteSnapshot,
    routerStateSnapshot: RouterStateSnapshot
  ) {
    // 目標路由和當前路由
    console.log(activatedRouteSnapshot);
    console.log(routerStateSnapshot);

    // 判斷並返回
    return canDeactivateComponent.canDeactivate ? canDeactivateComponent.canDeactivate() : true

  }
}

// can-deactivate.omponent.ts

// 接口組件, 返回 true 或 false 如表單發生改變則調用對話框服務
export interface CanDeactivateComponent {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

路由配置

{
  path: ...,
  canDeactivate: [DeacService],
  component: ...
}

模塊中添加服務

providers: [
  DeactivateGuardService
]