Router相关

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>

Router相关

1. Router 导航跳转相关方法

2. Router 跳转守卫拦截 -- （CanDeactivate：处理未保存的更改）

3. RouterLinkActive 路由激活高亮 ：当此链接指向的路由激活时，往宿主元素上添加一个 CSS 类，当url 发生了变化，则移除它。

推荐阅读更多精彩内容

3. RouterLinkActive 路由激活高亮：当此链接指向的路由激活时，往宿主元素上添加一个 CSS 类，当url 发生了变化，则移除它。