Question

如何在Angular中以编程方式构造选择器？

假设我有一个名为header.component的父组件，它看起来像这样；

export class ContentHeaderComponent {
  @Input() iconName: string;
}

...并且我正在使用Angular Feather向应用程序中添加图标，这需要您执行以下操作来创建图标：

<i-chevron-down></i-chevron-down>

在我的标头组件模板中，我想通过父组件将“ chevron-down”传递给标签。实际上，我希望在标头组件中执行以下操作：

<i-{{ iconName }}></i-{{ iconName }}>

是否可以在Angular中动态构造选择器？

Answer 1

如果您使用的是基于 css或基于连字的方法，那么您的用例将非常简单，但是由于您的库中每个图标有1个comp，并且它们之间基本上没有公共接口，因此AFAIK几乎没有办法将字符串映射到其对应的组件类。

注释中建议的方法将不起作用，因为 angular不会使用经过清理的HTML创建组件实例。

您可以尝试以下想法：可以通过传递带有所需图标的模板并将其嵌入到组件中，而不是传递图标名称。可以按照以下步骤进行操作：

<ng-container *ngIf="hasLink(column); then with_link else without_link">

    </ng-container>

另一种方法是将图标标记直接 transclude 到组件中：

@Component({
  selector: 'foo-header'
})
export class ContentHeaderComponent {
  @Input() iconTemplate: TemplateRef<any>;
}

## content-header.component.html
...some markup...
<ng-container *ngIf="iconTemplate">
   <ng-container [ngTemplateOutlet]="iconTemplate"></ng-container>
</ng-container>
...some more markup...    

## foo.component.html
<foo-header [iconTemplate]="iconRef"></foo-header>
<ng-template #iconRef>
  <i-chevron-down></i-foo-icon>
</ng-template>

您可以在this article中了解此方法及其优点/缺点。

Answer 2

由于Angular必须编译该元素，因此无法动态创建angular中角度分量的选择器。不过，您可以通过将角度组件编译为角度元素，然后在DOM中动态插入这些Web组件，来对Web组件进行此操作。

Answer 3

使用 Renderer2 而不是@epsilon -s答案可能会更麻烦。

使用方式：

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    const icon = this.renderer.createElement('i-chevron-down')

    this.renderer.appendChild(this.el.nativeElement, icon)
  }

您当然可以在该字符串中添加任何变量。另外，请不要忘记删除 OnDestroy 生命周期中的元素

通过@Input构造组件选择器

3 个答案: