Angular4 路由設置相關


1.路由相關配置

路由類設置

/*路由基本模型*/

/*導入RouterModule,Routes類型*/
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from "./login/login.component";

/*定義路由const表示不可改變*/
const routers: Routes = [
/*
path:字符串,表示默認登入,
path為路徑 /login component:組件
component:組件
pathMatch:為字符串默認為前綴匹配 "prefix"; "full" 為完全匹配。
redirectTo:指向為路徑,既path
outlet:字符串,路由目標,面對多個路由的情況
children:Routes 子路由相關
*/
{ path: '', component: LoginComponent },
// path:路徑 /detail/1 :id代表參數相關
{ path: 'detail/:id', component: LoginComponent },
// 懶加載子模塊, 子模塊需要配置路由設置啟動子組件,如果這樣設置了路由,需要在子模塊中再定義路由
{ path: 'other', loadChildren:"./demo/demo.module#demoModule" },
// 重定向,路徑為** 表示不能識別的路徑信息,重定向到相關路徑下
{ path: '**', pathMatch: 'full', redirectTo: '' }
];

/*將路由設置導出,子模塊中的路由使用 forChild 而不是 forRoot*/
export const appRouter = RouterModule.forRoot(routers);

ngModule設置

@NgModule({
declarations: [
......
],
imports: [
......
appRouter
]
})
組件模板設置

<router-outlet></router-outlet>

2.多路由處理

{ 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/ 時同時加載 NewsComponentNews2Cmponent 兩個組件


3.路有鏈接以及組件中調用路由方法使用

<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

或者:

this.router.navigate(['/detail', this.news.id])
this.router.navigate([{ outlets: { let2: null }}]);
其中:navigateByUrl 方法指向完整的絕對路徑


4.路由守衛(適用於后台管理等需要登錄才能使用的模塊)

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

@Injectable()
export class AuthService implements CanActivate {
canActivate() {
// 這里判斷登錄狀態, 返回 true 或 false
return true;
}
}
在路由配置中的設置

{ path: '', component: LoginComponent, canActivate:[LoginComponent] },

5.退出守衛(適合於編輯器修改后的保存提示等場景)

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

}
}
..

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

{
path: ...,
canDeactivate: [DeacService],
component: ...
}
模塊中添加服務

providers: [
DeactivateGuardService
]





注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com