如何在Angular 5应用中基于条件限制路由切换？

核心思路：使用CanDeactivate路由守卫 #

这个守卫专门用来控制用户是否能离开当前组件，完美匹配你的需求——只有完成作答后才允许跳转，否则拦截路由切换。我之前处理过类似场景，给你一步步拆解实现：

步骤1：定义组件级验证接口 #

先创建一个接口，让需要做离开验证的组件实现它，这样守卫可以统一调用组件内的验证逻辑：

// src/app/shared/can-deactivate.guard.ts
import { Observable } from 'rxjs/Observable';

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

步骤2：实现CanDeactivate守卫类 #

接下来写守卫的具体逻辑，它会调用当前组件的canDeactivate方法来判断是否允许离开：

// src/app/shared/can-deactivate.guard.ts
import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    // 调用组件自身的验证方法，没有的话默认允许离开
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

步骤3：在路由模块中配置守卫 #

把守卫添加到你的路由配置里，指定给需要验证的组件：

// src/app/app-routing.module.ts
import { CanDeactivateGuard } from './shared/can-deactivate.guard';
import { QuestionComponent } from './question/question.component';

const routes: Routes = [
  {
    path: 'question',
    component: QuestionComponent,
    // 给该组件配置离开守卫
    canDeactivate: [CanDeactivateGuard]
  },
  // 其他路由配置...
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  // 别忘了注册守卫服务
  providers: [CanDeactivateGuard]
})
export class AppRoutingModule { }

步骤4：在目标组件中实现验证逻辑 #

最后在你的问题组件里，实现之前定义的CanComponentDeactivate接口，写具体的判断逻辑——检查用户是否完成作答：

// src/app/question/question.component.ts
import { Component } from '@angular/core';
import { CanComponentDeactivate } from '../shared/can-deactivate.guard';

@Component({
  selector: 'app-question',
  templateUrl: './question.component.html'
})
export class QuestionComponent implements CanComponentDeactivate {
  // 假设这是存储用户作答状态的变量，完成作答后设为true
  isAnswerCompleted = false;

  canDeactivate(): boolean {
    // 如果已经完成作答，直接允许离开
    if (this.isAnswerCompleted) {
      return true;
    }
    // 未完成的话，弹出确认框提示用户
    return window.confirm('你还没完成问题作答，确定要离开吗？');
  }

  // 用户完成作答时调用这个方法，更新状态
  markAnswerAsCompleted() {
    this.isAnswerCompleted = true;
  }
}

扩展：用自定义模态框替代默认弹窗 #

如果你不想用浏览器自带的confirm弹窗，可以让canDeactivate返回一个Observable，在自定义模态框的确认/取消按钮点击时发射对应结果：

// 组件内的canDeactivate方法修改为：
canDeactivate(): Observable<boolean> {
  if (this.isAnswerCompleted) {
    return Observable.of(true);
  }
  // 假设你有一个自定义弹窗服务，返回Observable
  return this.customModalService.showConfirm('未完成作答，确定要离开吗？')
    .map(confirmResult => confirmResult === 'confirmed');
}

这样就完全实现了你的需求：用户在该组件时必须完成作答才能切换路由，完成后可以自由跳转系统内的其他路由。

内容的提问来源于stack exchange，提问作者Lakhvir Singh