如何在Web Components自定义元素中结合上下文绑定与命名/标记装饰器使用InversifyJS

针对Web Components无参构造约束下的InversifyJS依赖注入问题，以下是两种可行的优化方案，覆盖接口绑定、命名/标记装饰器支持及上下文绑定场景：

一、改进匿名子类方案：支持接口与命名装饰器 #

核心思路是通过复制原组件类的Inversify元数据到匿名子类，结合属性注入替代构造注入，解决浏览器实例化的限制。

实现代码 #

import { Container, injectable, inject, named, Metadata } from "inversify";

// 辅助函数：注入属性依赖
function injectProperties(instance: any, container: Container) {
  const propMetadata = Reflect.getMetadata("inversify:properties", instance.constructor) || [];
  propMetadata.forEach((prop: { key: string; serviceId: any; named?: string }) => {
    instance[prop.key] = prop.named 
      ? container.getNamed(prop.serviceId, prop.named) 
      : container.get(prop.serviceId);
  });
}

// 注册组件的核心方法
function registerComponent<T extends CustomElementConstructor>(
  container: Container,
  tagName: string,
  componentClass: T
) {
  class InjectedComponent extends componentClass {
    connectedCallback() {
      // 先执行原组件的生命周期钩子
      super.connectedCallback?.();
      // 在connectedCallback中完成属性注入
      injectProperties(this, container);
    }
  }

  // 复制原类的所有Inversify元数据到子类，确保装饰器生效
  const metadataKeys = Reflect.getMetadataKeys(componentClass);
  metadataKeys.forEach(key => {
    const value = Reflect.getMetadata(key, componentClass);
    Reflect.defineMetadata(key, value, InjectedComponent);
  });

  // 注册自定义元素
  customElements.define(tagName, InjectedComponent as unknown as CustomElementConstructor);
}

使用说明 #

1. 组件类定义：必须使用属性注入，构造函数保持无参

// 用Symbol作为接口的服务ID（TypeScript接口编译后不存在）
export const IUserService = Symbol("IUserService");
export interface IUserService {
  getProfile(): Promise<any>;
}

@injectable()
class UserService implements IUserService {
  async getProfile() { /* 实现逻辑 */ }
}

@injectable()
class ProfileCard extends HTMLElement {
  @inject(IUserService) private userService!: IUserService;
  @inject("AppConfig") @named("profile") private config!: { apiUrl: string };

  connectedCallback() {
    // 注入完成后可直接使用依赖
    this.userService.getProfile().then(data => { /* 渲染逻辑 */ });
  }
}

2. 容器绑定：提前绑定接口、命名依赖

const container = new Container();
container.bind<IUserService>(IUserService).to(UserService);
container.bind("AppConfig").toConstantValue({ apiUrl: "/api" }).whenTargetNamed("profile");

// 注册组件
registerComponent(container, "profile-card", ProfileCard);

二、上下文绑定实现：多组件多配置支持 #

通过子容器+元素上下文标识，实现不同组件实例绑定不同配置的服务。

实现代码 #

// 创建根容器及不同上下文的子容器
const rootContainer = new Container();
const adminContainer = rootContainer.createChild();
const userContainer = rootContainer.createChild();

// 绑定不同上下文的专属配置
adminContainer.bind("AppConfig").toConstantValue({ apiUrl: "/admin/api" });
userContainer.bind("AppConfig").toConstantValue({ apiUrl: "/user/api" });

// 支持上下文的组件注册方法
function registerComponentWithContext<T extends CustomElementConstructor>(
  contextContainers: Record<string, Container>,
  defaultContainer: Container,
  tagName: string,
  componentClass: T
) {
  class ContextInjectedComponent extends componentClass {
    connectedCallback() {
      super.connectedCallback?.();
      // 从元素属性获取上下文标识
      const context = this.getAttribute("data-context") || "default";
      const targetContainer = contextContainers[context] || defaultContainer;
      injectProperties(this, targetContainer);
    }
  }

  // 复制元数据（同方案一）
  const metadataKeys = Reflect.getMetadataKeys(componentClass);
  metadataKeys.forEach(key => {
    const value = Reflect.getMetadata(key, componentClass);
    Reflect.defineMetadata(key, value, ContextInjectedComponent);
  });

  customElements.define(tagName, ContextInjectedComponent as unknown as CustomElementConstructor);
}

使用说明 #

在DOM中通过data-context属性指定组件的上下文：

<!-- 使用admin上下文的配置 -->
<profile-card data-context="admin"></profile-card>
<!-- 使用user上下文的配置 -->
<profile-card data-context="user"></profile-card>

关键注意事项 #

1. 必须使用属性注入：Web Components规范强制构造函数无参，构造注入完全不可行。
2. 接口绑定依赖Symbol：TypeScript接口编译后会被擦除，必须用Symbol作为服务ID来绑定接口与实现类。
3. 子容器继承特性：子容器会继承根容器的所有绑定，仅需覆盖特定的上下文专属依赖（如配置）。

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