如何阻止Angular路由切换同Micro Frontend组件时重新加载？

针对你遇到的问题——切换同一路由下的参数时，模块联邦加载的微前端组件（含iframe）被重复重建，以下是可行的解决步骤：

1. 修复自定义RouteReuseStrategy，支持模块联邦懒加载组件 #

自定义路由复用策略默认可能未正确识别模块联邦的loadComponent加载的组件，需调整逻辑以匹配路由配置和组件加载器：

import { RouteReuseStrategy, DetachedRouteHandle, ActivatedRouteSnapshot } from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private storedHandles = new Map<string, DetachedRouteHandle>();

  // 判断是否复用当前路由核心逻辑：匹配路由path和组件加载器
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig?.path === curr.routeConfig?.path 
      && future.routeConfig?.loadComponent === curr.routeConfig?.loadComponent;
  }

  // 检查是否存在可复用的缓存组件
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    return this.storedHandles.has(this.getRouteKey(route));
  }

  // 指定需要缓存的路由（仅微前端路由）
  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    return route.routeConfig?.path?.startsWith('my-legacy-app/') ?? false;
  }

  // 缓存路由组件实例
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.storedHandles.set(this.getRouteKey(route), handle);
  }

  // 取出缓存的组件实例
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
    return this.storedHandles.get(this.getRouteKey(route)) || null;
  }

  // 生成唯一路由标识：path + 组件加载器签名
  private getRouteKey(route: ActivatedRouteSnapshot): string {
    const path = route.routeConfig?.path || '';
    const loaderKey = route.routeConfig?.loadComponent?.toString() || '';
    return `${path}-${loaderKey}`;
  }
}

在Shell的AppModule中注册该策略：

import { NgModule } from '@angular/core';
import { RouteReuseStrategy } from '@angular/router';
import { CustomRouteReuseStrategy } from './custom-route-reuse-strategy';

@NgModule({
  providers: [
    { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
  ]
})
export class AppModule { }

2. 调整路由配置，支持带参数的同组件路由 #

修改Shell的路由，将标签ID作为路由参数，指向同一个微前端组件：

{
  path: 'my-legacy-app/:tabId',
  loadComponent: () =>
    loadRemoteModule({
      remoteName: 'my-legacy-app',
      exposedModule: './Component'
    }).then(module => module.MyLegacyAppComponent)
}

3. 在微前端组件中监听路由参数变化，同步切换AngularJS标签 #

避免依赖组件重建，而是通过路由参数订阅来触发iframe内的标签切换：

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-my-legacy-app',
  template: '<iframe #legacyFrame src="https://your-angularjs-app-url"></iframe>'
})
export class MyLegacyAppComponent implements OnInit {
  @ViewChild('legacyFrame') legacyFrame!: ElementRef<HTMLIFrameElement>;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // 监听路由参数变化，向AngularJS应用发送切换指令
    this.route.paramMap.subscribe(params => {
      const tabId = params.get('tabId');
      const iframeWindow = this.legacyFrame.nativeElement.contentWindow;
      if (tabId && iframeWindow) {
        iframeWindow.postMessage(
          { type: 'SWITCH_TAB', tabId },
          'https://your-angularjs-app-domain' // 替换为实际AngularJS应用域名
        );
      }
    });
  }
}

同时在AngularJS应用中添加消息监听：

// AngularJS应用全局代码
window.addEventListener('message', function(event) {
  // 验证消息来源，避免跨域风险
  if (event.origin !== 'https://your-shell-domain') return;
  
  if (event.data.type === 'SWITCH_TAB') {
    // 调用AngularJS内部的标签切换逻辑
    yourAngularJsModule.run(function($rootScope) {
      $rootScope.$broadcast('switchTab', event.data.tabId);
    });
  }
});

关键说明 #

之前的RouteReuseStrategy无效，是因为未针对模块联邦的懒加载组件做匹配判断——默认逻辑仅识别显式声明的component，而非loadComponent加载的动态组件。通过对比路由path和loadComponent的签名，确保同组件路由被复用，避免重复加载微前端和iframe。

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