Single SPA Angular中如何通过URL绑定参数从父应用传数据到子应用

该需求可以实现，以下是两种常用的落地方案：

方案一：子应用直接解析全局URL（快速实现） #

Single SPA子应用运行在父应用的同一个浏览器上下文，地址栏URL全局共享，可以直接解析路径拿到参数：

// 子应用任意组件/服务中代码示例
import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  appId = '';

  constructor(private location: Location) {}

  ngOnInit(): void {
    // 拆分路径段匹配参数
    const pathSegments = this.location.path().split('/');
    const productPathIndex = pathSegments.findIndex(seg => seg === 'product');
    if (productPathIndex > -1 && pathSegments[productPathIndex + 1]) {
      this.appId = pathSegments[productPathIndex + 1];
    }
    // 也可以直接用原生API解析：window.location.pathname.split('/') 逻辑同上
  }
}

• 优势：实现简单，不需要修改父应用逻辑
• 劣势：和父应用路由规则强耦合，父应用路由调整后子应用解析逻辑也要同步修改

方案二：父应用通过Single SPA自定义Props传递（更规范，推荐使用） #

通过Single SPA原生的自定义参数传递能力实现，父子应用解耦，参数传递更可控：

第一步：父应用获取参数并传递 #

父应用先在ProductComponent中拿到路由参数，挂载子应用时将参数作为自定义Props传入：

// 父应用ProductComponent代码示例
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { registerApplication } from 'single-spa';

@Component({
  selector: 'app-product',
  template: `<div id="child-app-mount-point"></div>`
})
export class ProductComponent implements OnInit {
  appId = '';

  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit(): void {
    // 父应用先获取路由参数
    this.appId = this.activatedRoute.snapshot.params['appId'];
    // 注册子应用时传入自定义Props
    registerApplication({
      name: 'childAngularApp',
      app: () => import('http://localhost:4201/main.js'),
      activeWhen: location => location.pathname.startsWith('/product'),
      customProps: {
        appId: this.appId
      }
    });
    // 如果使用Parcel挂载子应用，参数在mountRootParcel方法中传入即可
  }
}

第二步：子应用接收参数 #

在子应用的Single SPA入口文件中接收Props，通过Angular依赖注入将参数全局提供给子应用所有组件使用：

// 子应用入口main.ts代码示例
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

const lifecycles = singleSpaAngular({
  platformBrowserDynamic,
  bootstrapFunction: (props: Record<string, any>) => {
    return platformBrowserDynamic([
      // 将拿到的appId注入为全局可用的依赖
      { provide: 'CHILD_APP_ID', useValue: props.appId },
      ...getSingleSpaExtraProviders()
    ]).bootstrapModule(AppModule);
  },
  template: `<app-root />`,
  Router,
  NgZone: (window as any).Zone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

第三步：子应用组件中直接使用参数 #

// 子应用任意组件代码示例
import { Component, Inject, OnInit } from '@angular/core';

@Component({
  selector: 'app-demo',
  template: `当前appId为：{{appId}}`
})
export class DemoComponent implements OnInit {
  constructor(@Inject('CHILD_APP_ID') public appId: string) {}

  ngOnInit(): void {
    console.log('获取到的appId参数：', this.appId);
  }
}

• 优势：父子应用解耦，父应用路由规则调整不会影响子应用参数获取，参数传递可控性更高
• 劣势：需要同时修改父子应用代码

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