Angular中能否将自定义TypeScript组件转换为HTMLElement？

可以直接获取自定义组件对应的真实DOM节点传入，Angular自定义组件最终渲染到页面后本身就是继承自HTMLElement的标准自定义DOM元素，完全匹配lib.dom.d.ts中定义的HTMLElement类型，不需要做特殊运行时转换。

具体实现方式 #

• 模板静态挂载组件获取方式
  1. 先在组件模板中给自定义组件标记模板引用变量

  <my-component #myComponentRef></my-component>
  

  2. 在宿主组件类中通过ViewChild读取元素引用，注意要指定读取ElementRef，不要直接取组件类实例

  import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
  import { MyComponent } from './my-component.component';
  
  @Component({
    selector: 'app-host',
    templateUrl: './host.component.html'
  })
  export class HostComponent implements AfterViewInit {
    @ViewChild('myComponentRef', { read: ElementRef }) myCompElement!: ElementRef<HTMLElement>;
  
    ngAfterViewInit(): void {
      // nativeElement就是符合类型要求的HTMLElement实例
      const validHtmlElement = this.myCompElement.nativeElement;
      // 直接传入要求HTMLElement入参的函数即可
      targetFunction(validHtmlElement);
    }
  }
  

• 动态创建组件获取方式
  如果是通过ViewContainerRef动态创建的组件，可以直接从组件引用对象上拿宿主DOM节点：

  const componentRef = this.viewContainerRef.createComponent(MyComponent);
  // 取出动态组件对应的原生DOM节点
  const dynamicCompEl = componentRef.location.nativeElement as HTMLElement;
  // 传入目标函数
  targetFunction(dynamicCompEl);
  

注意事项 #

• 不要在ngOnInit生命周期阶段获取元素，此时视图尚未完成初始化，ViewChild无法拿到有效的DOM引用，需要在ngAfterViewInit及之后的生命周期中操作。
• 不要直接把组件类实例当做HTMLElement传入，只有ElementRef下的nativeElement属性才是真实存在于DOM树中的HTMLElement节点。
• 如果TypeScript报类型不匹配错误，只需要加as HTMLElement类型断言即可，不存在运行时兼容问题，自定义组件标签本身就属于HTMLElement子类。

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