Angular12的Angular Elements中如何导出并使用Directive而非组件

根本原因 #

Angular Elements 提供的 createCustomElement 方法仅支持将 Angular 组件转换为自定义元素，不支持直接传入指令类。你传入 Directive 类后，框架会按照组件的元数据结构读取对应字段，自然会因为找不到对应属性抛出 Cannot read property 'type' of null 错误。

可行解决方案 #

你不需要硬套指令的实现，用「属性选择器组件」即可完美替代指令的能力，同时不会生成额外的宿主标签，完全适配CSS框架的样式规则：

步骤1：将指令改造为属性选择器组件 #

组件的selector可以定义为属性选择器，绑定到已有原生元素上，宿主就是你加属性的元素，不会生成额外DOM：

// test-feature.component.ts
import { Component, ElementRef, HostListener, Input } from '@angular/core';

@Component({
  selector: '[my-directive-here]', // 定义为属性选择器，和之前指令的选择器完全一致
  template: `` // 不需要额外模板内容
})
export class TestFeatureComponent {
  // 可以和指令一样加输入属性、事件监听
  @Input() maxLength: number = 20;

  constructor(private el: ElementRef<HTMLInputElement>) {
    // 这里拿到的就是你绑定的input元素，和指令逻辑完全一致
    this.el.nativeElement.style.borderRadius = '4px';
  }

  @HostListener('input', ['$event.target.value'])
  onInput(value: string) {
    // 你的自定义逻辑，比如输入校验、格式转换等
    if (value.length > this.maxLength) {
      this.el.nativeElement.value = value.slice(0, this.maxLength);
    }
  }
}

步骤2：调整模块配置 #

// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { FormsModule } from '@angular/forms';
import { TestFeatureComponent } from './test-feature.component';

@NgModule({
  declarations: [TestFeatureComponent],
  imports: [
    FormsModule,
    BrowserModule
  ],
  entryComponents: [TestFeatureComponent]
})
export class AppModule {
  constructor(private injector: Injector) {
    // 转换为自定义元素，命名必须符合W3C规范（包含短横线）
    const customEl = createCustomElement(TestFeatureComponent, { injector: this.injector });
    customElements.define('my-feature-host', customEl);
  }

  ngDoBootstrap() {
    // 初始化页面中已存在的、加了对应属性的元素
    document.querySelectorAll('[my-directive-here]').forEach(el => {
      document.createElement('my-feature-host').attach(el as HTMLElement);
    });

    // 监听后续动态插入的DOM元素，自动激活逻辑（不需要可以删掉）
    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        mutation.addedNodes.forEach((node: HTMLElement) => {
          if (node.nodeType !== Node.ELEMENT_NODE) return;
          if (node.hasAttribute('my-directive-here')) {
            document.createElement('my-feature-host').attach(node);
          }
          node.querySelectorAll?.('[my-directive-here]').forEach(child => {
            document.createElement('my-feature-host').attach(child as HTMLElement);
          });
        });
      });
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }
}

使用方式和你预期的完全一致 #

<div class="form-floating mb-3">
  <input type="email" my-directive-here maxLength="10" class="form-control" id="floatingInput">
  <label for="floatingInput">Email address</label>
</div>

没有多余的宿主标签，CSS框架样式不受影响，双向绑定、变更检测逻辑都可以正常运行。

备选方案（轻量场景） #

如果你的逻辑不需要用到Angular的依赖注入、变更检测等能力，可以直接把逻辑抽为原生JS实现，打包成UMD文件引入即可，性能更优。

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