Angular组件内阻止导航（不使用路由守卫）方案咨询

你完全可以通过CanDeactivate路由守卫实现这个需求，它是组件级别的守卫，能直接访问组件内部的变更检查逻辑，正好解决你提到的「服务无法获取组件属性」的问题。以下是具体实现步骤：

1. 定义CanDeactivate接口与守卫类 #

先创建一个通用接口，让需要拦截导航的组件实现该接口，确保守卫能调用组件的变更检查方法：

// can-deactivate.guard.ts
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';

// 定义组件需实现的接口
export interface CanComponentDeactivate {
  hasChanged: boolean;
}

export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    // 如果有未保存更改，弹出确认框
    if (component.hasChanged) {
      return window.confirm('你有未保存的更改，确定要离开吗？');
    }
    return true;
  }
}

2. 在组件中实现接口 #

你的组件已经有hasChanged getter，只需实现上述接口即可，同时优化原有的beforeunload处理适配现代浏览器：

// your-component.component.ts
import { Component } from '@angular/core';
import { CanComponentDeactivate } from './can-deactivate.guard';

@Component({
  // 组件元数据
})
export class YourComponent implements CanComponentDeactivate {
  // 现有代码...
  public get hasChanged(): boolean {
    return this.changeManager.hasChanged({
        propA: this.propACtrl.value,
        propB: this.propBCtrl.value,
        // 其他检查项
    });
  }

  // 优化后的beforeunload处理
  @HostListener("window:beforeunload", ["$event"])
  public unloadHandler(event: Event): void {
    if (this.hasChanged) {
      // 现代浏览器需设置returnValue触发默认确认框
      event.returnValue = '你有未保存的更改，确定要离开吗？';
    }
  }
}

3. 在路由配置中注册守卫 #

将守卫添加到路由模块中，并为目标路由配置canDeactivate规则：

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { YourComponent } from './your-component.component';
import { CanDeactivateGuard } from './can-deactivate.guard';

const routes: Routes = [
  {
    path: 'your-path',
    component: YourComponent,
    canDeactivate: [CanDeactivateGuard] // 绑定守卫到路由
  }
];

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

方案优势 #

• CanDeactivate守卫直接关联组件实例，能访问组件内部的hasChanged属性，完美解决「服务无法获取组件私有属性」的问题。
• 覆盖所有路由发起的导航场景（包括routerLink、router.navigate等），配合beforeunload事件实现全场景的页面离开拦截。

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