Angular独立组件中CanLoad守卫的等效替代方案是什么？

针对你遇到的loadComponent无法用CanLoad阻止组件预加载的问题，以下是两种可行的等效方案：

方案一：使用 canMatch 守卫（推荐） #

canMatch 是在路由匹配阶段触发的守卫，执行时机早于 loadComponent，完全可以实现类似 CanLoad 的拦截效果。如果之前使用没生效，大概率是守卫的实现细节有误，正确写法如下：

1. 实现 CanMatch 守卫：

import { CanMatch, Route, UrlSegment, Router } from '@angular/router';
import { Injectable } from '@angular/core';
import { FeatureFlagService } from './feature-flag.service';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class FeatureFlagGuard implements CanMatch {
  constructor(
    private featureFlagService: FeatureFlagService,
    private router: Router
  ) {}

  canMatch(
    route: Route,
    segments: UrlSegment[]
  ): Observable<boolean> | Promise<boolean> | boolean {
    const isFeatureEnabled = this.featureFlagService.isEnabled('target-feature');
    if (!isFeatureEnabled) {
      this.router.navigate(['/not-available']);
      return false;
    }
    return true;
  }
}

2. 在路由配置中绑定守卫：

const routes: Routes = [
  {
    path: 'target-page',
    canMatch: [FeatureFlagGuard], // 用canMatch代替CanLoad
    loadComponent: () => import('./target-page.component').then(m => m.TargetPageComponent)
  }
];

当守卫返回false时，路由不会匹配，loadComponent对应的组件代码也不会被加载，完全达到CanLoad的拦截效果。

方案二：在 loadComponent 工厂函数中直接做条件判断 #

如果不想使用守卫，可以直接在动态导入的逻辑里加入功能标志判断，阻止目标组件加载：

import { FeatureFlagService } from './feature-flag.service';

const routes: Routes = [
  {
    path: 'target-page',
    loadComponent: () => {
      if (FeatureFlagService.isEnabled('target-feature')) {
        return import('./target-page.component').then(m => m.TargetPageComponent);
      }
      // 功能未启用时，加载替代组件
      return import('./feature-unavailable.component').then(m => m.FeatureUnavailableComponent);
    }
  }
];

这种方式更直接，缺点是无法在路由匹配阶段提前拦截，但确实能避免不必要的目标组件代码加载。

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