通过 @Input 构造组件选择器

Question

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

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

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

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

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

在我的 header 组件模板中，我想通过 parent 组件将 "chevron-down" 传递给标签。实际上，我希望在 header 组件中做这样的事情：

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

是否可以在 Angular 中即时构建选择器？

Answer 1

使用 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 生命周期

中的元素

Answer 2

如果您使用 css 或基于连字的 方法，您的用例将非常简单，但是因为您的库每个图标有 1 个组件，并且基本上它们之间没有共同的接口，AFAIK 实际上没有办法将字符串映射到它对应的组件 class.

评论中建议的方法行不通，因为 angular 不会从经过清理的 HTML.

创建组件实例

您可以尝试以下想法：您可以传递带有所需图标的模板并将其嵌入到组件中，而不是传递图标名称。这可以按如下方式完成：

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

内容-header.component.html

<ng-container *ngIf="iconTemplate">
  <ng-container [ngTemplateOutlet]="iconTemplate"></ng-container>
</ng-container>

foo.component.html

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

另一种方法是直接将图标标记转入组件：

@Component({
  selector: 'foo-header'
})
export class ContentHeaderComponent {}

内容-header.component.html

<ng-content select="[header-icon]"></ng-content>

foo.component.html

<foo-header>
  <i-chevron-down header-icon></i-foo-icon>
</foo-header>

您可以在 this article 中阅读这些方法及其 pros/cons。

Answer 3

无法在 angular 中动态创建 angular 组件的选择器，因为 Angular 必须编译该元素。但是，您可以为 Web 组件执行此操作，方法是将 angular 组件编译为 angular 元素，然后将这些 Web 组件动态插入 DOM.

通过 @Input 构造组件选择器

Construct component selector via an @Input

angular-template

angular-components

angular