angular - 如何根据值创建动态标签

Question

我需要创建一个模板，其中将根据变量值动态定义原生 html 标签。

我尝试使用自定义指令，将最初定义的标签替换为请求的新标签，例如此处所述。尽管该解决方案似乎在一定程度上有效，但它破坏了 innerHTML 内容与组件类的变量和事件绑定。换句话说，组件类变量的更改不再对呈现的 html 产生影响。

在 Vue 中有一种非常简单的实现方式：

<component :is="tagName" class="foo" style="color:red">
  anything inside component
</component>

tagName = 'p'例如，这将导致

<p class="foo" style="color:red">
  anything inside component
</p>

我想知道是否会有任何类似的角度解决方案。任何帮助都会很棒。

标签： angular

Answer 1

为什么不按条件添加指定的元素？

<container-element [ngSwitch]="tagName">  
  <elementType1 *ngSwitchCase="tagName1">...</elementType1>
  <elementType2 *ngSwitchCase="tagName2">...</elementType2>
  <elementTypeDefault *ngSwitchDefault>...</elementTypeDefault>
</container-element>

或使用基本的*ngIf：

<elementType1 *ngIf="tagName1_expression">anything inside component</elementType1>
<elementType2 *ngIf="tagName2_expression">anything inside component</elementType2>