1. Router 导航跳转相关方法
// 1. Html跳转
<button routerLink="/archives/not-certification-apply">新增</button>
// 2. navigateByUrl() 基于所提供的 url 进行导航。这种导航永远使用绝对路径。
this.router.navigateByUrl('/project/home/settings');
// 3. navigate() 路由跳转传递参数
// consult-calendar.ts 传递参数
import { Router } from '@angular/router';
constructor(
private route: Router,
) { }
this.route.navigate(['/consult/consultinfo'], {
queryParams: {
caseId: caseId,
operation: 'update',
}
})
// consult-info.ts 获取参数
// 激活的路由:路由的路径和参数可以通过注入进来的一个名叫ActivatedRoute的路由服务来获取
import { ActivatedRoute } from '@angular/router';
constructor(
private router_a: ActivatedRoute,
) { }
this.router_a.queryParamMap.subscribe(queryParams => {
this.operation = queryParams.operation;
this.operation = queryParams.operation;
})
2. Router 跳转守卫拦截 -- (CanDeactivate:处理未保存的更改)
- 检查任意组件
// 新建 leava-guard.service.ts
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
canDeactivate(component: CanComponentDeactivate) {
return component.canDeactivate ? component.canDeactivate() : true;
}
}
// video.ts 写入方法判断
import { Observable } from 'rxjs';
// 它返回observable,决定放弃更改直接导航离开(true),或者保留未完成的修改,留在危机编辑器中(false)。
canDeactivate(): Observable<boolean> | boolean {
if (this.isRecover === true) {
return true;
}
const obs = new Observable<boolean>(observer => {
this.modalService.confirm({
nzTitle: '<i>您正在离开页面</i>',
nzContent: '<b>请问确认是否离开页面,您可能会丢失尚未保存的数据。</b>',
nzOnOk: () => {
observer.next(true);
},
nzOnCancel: () => {
observer.next(false);
},
});
});
return obs;
}
// project-routing.module.ts
//在路由中用 canDeactivate 数组添加一个 Guard(守卫)。
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { VideoComponent } from './video/video.component';
import { CanDeactivateGuard } from 'app/service/leave-guard.service';
import { CanDeactivateGuardVideo } from 'app/service/can-leave-video.service'; // 针对vuideo 创建的特定守卫
const routes: Routes = [
{ path: 'authenticate', component: AuthenticateComponent },
{
path: 'home',
component: HomeComponent,
children: [
{
path: 'video',
component: VideoComponent,
canDeactivate: [CanDeactivateGuard]
// canDeactivate: [CanDeactivateGuardVideo] // 特定守卫
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ProjectRoutingModule { }
// project.module.ts
// 在 @NgModule providers 里面注册 守卫 !否则会报错误:Error: StaticInjectorError(AppModule)[CanDeactivateGuardVideo]
import { CanDeactivateGuard } from 'app/service/leave-guard.service';
import { CanDeactivateGuardVideo } from 'app/service/can-leave-video.service'; // 特定守卫
@NgModule({
imports: [],
declarations: [],
providers: [
CanDeactivateGuard,
// CanDeactivateGuardVideo // 特定守卫
],
entryComponents: COMPONENT_NOROUNT
})
- 检查特定组件,创建特定的守卫
// 创建 can-leave-video.service.ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { CanDeactivate,ActivatedRouteSnapshot,RouterStateSnapshot} from '@angular/router';
import { VideoComponent } from '../routes/project/video/video.component'; // 针对video.component 组件创建特定 守卫
@Injectable()
export class CanDeactivateGuardVideo implements CanDeactivate<VideoComponent> {
canDeactivate(
component: VideoComponent,
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
nextState: RouterStateSnapshot,
): Observable<boolean> | boolean {
const nextRoute = nextState.url;
const nextRouteArray = nextRoute.split('/');
// 允许进入home子集路由
if (nextRouteArray.indexOf('project') !== -1 && nextRouteArray.indexOf('home') !== -1) {
return true;
}
return component.canDeactivate();
}
}
// video.ts / project-routing.module.ts / project.module.ts 代码同上
3. RouterLinkActive 路由激活高亮 :当此链接指向的路由激活时,往宿主元素上添加一个 CSS 类,当url 发生了变化,则移除它。
// 1. 匹配路由激活,宿主元素添加一个 class
// 当浏览器的当前 url 是 '/user' 或 '/user/bob' 时,就会往 a 标签上添加 active-link 类; 如果 url 发生了变化,则移除它。
<a routerLink="/user/bob" routerLinkActive="active-link">Bob</a>
// 2. 设置多个 class
<a routerLink="/user/bob" routerLinkActive="class1 class2">Bob</a>
<a routerLink="/user/bob" [routerLinkActive]="['class1', 'class2']">Bob</a>
// 3. exact: true 精确匹配路由
<a routerLink="/user/bob" routerLinkActive="active-link" [routerLinkActiveOptions]="{exact:true}">Bob</a>
// 4. RouterLinkActive 的实例赋给一个模板变量,以直接检查 isActive 的状态。
<a routerLink="/user/bob" routerLinkActive="btn-primary" [class.btn-default]="!rla.isActive" #rla="routerLinkActive" >
Bob {{ rla.isActive ? '(already open)' : ''}}
</a>
// 5. RouterLinkActive 指令用在 RouterLink 的各级祖先节点上。
// 无论当前 url 是 '/user/jim' 还是 '/user/bob',都会往 div 标签上添加一个 active-link 类。
<div routerLinkActive="active-link">
<a routerLink="/user/jim">Jim</a>
<a routerLink="/user/bob">Bob</a>
</div>
网友评论