如何从Angular客户端向Lit Element构造函数注入参数？

问题核心错误 #

你当前的实现思路存在几个致命问题：

1. Web Components规范强制要求自定义元素的构造函数必须无参，浏览器通过customElements.define创建元素时，只会调用无参构造，无法直接传递参数。
2. Angular的@Inject用法完全错误，它需要注入令牌而非DOM实例，且构造函数内修改注入变量无法同步到已创建的元素。
3. 你在index.html中直接渲染了<my-lit-element>，此时元素构造函数已经执行完毕，后续传参根本无法生效。

正确实现方案 #

步骤1：修改Lit Element代码，支持外部配置传递 #

因为构造函数不能传参，我们改用响应式属性接收配置（符合Web Components规范，且Lit原生支持）：

import {customElement, property} from "lit/decorators.js";
import {LitElement} from "lit";

@customElement('my-lit-element')
export class MyLitElement extends LitElement {
  // 定义响应式属性，接收外部传入的配置
  @property({type: String}) config = '';

  constructor() {
    super();
    console.log('this is test log');
  }

  // 属性变化时自动触发（Lit的响应式生命周期）
  updated(changedProperties) {
    if (changedProperties.has('config')) {
      if (this.config) {
        console.log('inside config');
        console.log('config', this.config);
      }
    }
  }

  connectedCallback() {
    super.connectedCallback();
  }

  testMethod() {
    console.log('Hi from testMethod()');
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'my-lit-element': MyLitElement;
  }
}

步骤2：Angular组件中传递配置 #

推荐两种方式，根据你的渲染场景选择：

方式一：Angular模板绑定属性（推荐）

不在index.html直接渲染元素，改为在Angular组件模板中声明，并绑定配置：
组件模板（client.component.html）：

<my-lit-element [config]="angularConfig"></my-lit-element>

组件类（client.component.ts）：

import { Component } from '@angular/core';

// 类型声明避免TS类型报错
export interface MyLitElement extends HTMLElement {
  config: string;
  testMethod(): void;
}

declare global {
  interface HTMLElementTagNameMap {
    'my-lit-element': MyLitElement;
  }
}

@Component({
  selector: 'app-client',
  templateUrl: './client.component.html'
})
export class ClientComponent {
  // 从Angular侧定义要传递的配置
  angularConfig = 'SOME VALUE FROM ANGULAR SPA';
}

方式二：静态渲染元素后通过代码设置属性

如果必须在index.html中静态渲染<my-lit-element>，则在Angular组件的ngAfterViewInit生命周期中获取元素实例并设置属性：

import { Component, AfterViewInit } from '@angular/core';

export interface MyLitElement extends HTMLElement {
  config: string;
  testMethod(): void;
}

declare global {
  interface HTMLElementTagNameMap {
    'my-lit-element': MyLitElement;
  }
}

@Component({
  selector: 'app-client',
  template: ''
})
export class ClientComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    const litElement = document.querySelector('my-lit-element') as MyLitElement;
    if (litElement) {
      litElement.config = 'SOME VALUE FROM ANGULAR SPA';
      // 如需调用元素方法也可在此执行
      litElement.testMethod();
    }
  }
}

关键注意事项 #

• 永远不要给自定义元素的构造函数加参数，这违反Web Components规范。
• Lit的@property会自动监听属性变化并触发updated方法，无需手动监听DOM属性。
• Angular与Web Components结合时，优先用模板绑定属性，保持Angular响应式特性，减少直接DOM操作。

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