Angular 模板：使用变量值作为 DOM 元素类型

Question

我有一个组件，想将其动态呈现为 div 或 span。所以我定义了一个输入变量elementType。现在我想在模板中渲染它。

伪代码：

<{{elementType}}>Content of the element</{{elementType}}>

这当然不行，这是模板渲染错误。我当然可以做类似

的事情

<div *ngIf="elementType == 'div'">Content of the element</div>
<span *ngIf="elementType == 'span'">Content of the element</span>

但我必须重复一遍，在更复杂的现实世界示例中，这是一团糟。

处理这个需求的好方法是什么？

Answer 1

好的，我的 ngTemplate 解决方案：

<ng-template #inner>
    The complex inner part
</ng-template>

<div *ngIf="elementType == 'div'">
    <ng-container *ngTemplateOutlet="inner"></ng-container>
</div>
<span *ngIf="elementType == 'span'">
    <ng-container *ngTemplateOutlet="inner"></ng-container>
</span>

没关系，我不重复自己，即使内部部分很复杂。缺点：如果我希望元素是 p、h1 或其他任何元素，我总是必须向模板添加新行。

在没有这个限制的情况下能够满足要求的更好的想法？

Angular 模板：使用变量值作为 DOM 元素类型

Angular template: Use variable value as DOM element type

angular-template

angular