动态创建带属性选择器的Angular 2组件时如何指定目标标签名？

当你用属性选择器（比如[some-attr]）定义组件时，Angular确实会默认用<div>作为组件的宿主元素，但有几种灵活的方法可以替换成你想要的标签：

方法1：Angular 13+ 直接通过createComponent的选项指定宿主元素 #

在较新的Angular版本中，ViewContainerRef.createComponent方法提供了hostElement选项，让你直接指定组件挂载的宿主标签：

import { ViewContainerRef } from '@angular/core';
import { YourAttrComponent } from './your-attr.component';

// 在组件类中实现
constructor(private viewContainerRef: ViewContainerRef) {}

createCustomHostComponent() {
  // 创建你想要的标签元素，比如<section>、<span>等
  const customHost = document.createElement('section');
  
  // 动态创建组件并指定宿主元素
  const componentRef = this.viewContainerRef.createComponent(YourAttrComponent, {
    hostElement: customHost
  });
  
  // 此时生成的DOM就是 <section some-attr></section>
}

方法2：手动创建宿主元素并关联组件（兼容旧版本） #

如果你的项目用的是Angular 12及以下版本，可以手动创建宿主元素，再通过组件工厂绑定到该元素：

import { ComponentFactoryResolver, Injector, ViewContainerRef } from '@angular/core';
import { YourAttrComponent } from './your-attr.component';

constructor(
  private viewContainerRef: ViewContainerRef,
  private componentFactoryResolver: ComponentFactoryResolver,
  private injector: Injector
) {}

createCustomHostComponent() {
  // 1. 创建自定义宿主标签
  const customHost = document.createElement('span');
  // 把宿主元素添加到视图容器的DOM位置
  this.viewContainerRef.element.nativeElement.appendChild(customHost);

  // 2. 解析组件工厂
  const factory = this.componentFactoryResolver.resolveComponentFactory(YourAttrComponent);
  // 3. 创建组件实例，关联到自定义宿主元素
  const componentRef = factory.create(this.injector, [], customHost);
  
  // 4. 把组件视图插入到视图容器中
  this.viewContainerRef.insert(componentRef.hostView);
}

额外说明 #

• 这种方式完全保留了属性选择器的灵活性——组件依然可以通过[some-attr]属性绑定到任意标签，但动态创建时你能主动控制宿主标签类型
• 如果你希望组件默认只关联特定标签，可以把组件选择器修改为span[some-attr]这种形式，但这样会失去属性选择器的通用性，所以按需选择

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