如何将ts中的变量用作HTML文件中的标记名？

我想知道是否有任何方法可以使用从变量获取的

HTML标记名（，例如）

以下是我尝试的代码：

app.component.ts

app.component.html

{{x}}-{i}
{{getFromCharCode（i）}
{{标记名}}

如果我试着像：

<{{tagName}}></{{tagName}}>

我犯了这样的错误

模板分析错误： 意外的结束标记“{{tagName}}”。当标记已被另一个标记关闭时，可能会发生这种情况

我提到过，但我发现对于一个简单的替换来说是相当复杂的。有没有其他方法可以做到这一点

编辑-1：

---

许多人建议使用innerHTML，但对于小内容，这是可行的。在我的典型情况下，我希望所有html内容都在同一个文件中，并且我只会在

ts

file

中获得标记的名称，您可以使用innerHTML实现以下目的：

ngOnInit(){
  this.tagName = "<p></p>";
}

<div [innerHTML]="tagName"></div>

ngOnInit（）{
this.tagName=“
”；
}

Hi首先，这种方法不起作用，因为插值将值视为字符串，因此它将始终作为文本显示在屏幕上

通过你的问题，我理解的是你想在一个已经存在的元素中添加HTML

最简单的方法是：-

在ts中，为变量指定要插入的值，例如

tagName = `<div> Some text inside </div>`;

tagName=`Some text in`；

然后在html中，您可以简单地执行以下操作：-

<h1 [innerHTML]="tagName">

另一种方法是在ts中获取元素的引用，然后从那里插入它

<div *ngFor="let x of somevalues; let i = index">
  {{x}} - {{i}}
  {{ getFromCharCode(i) }}
  <h1 innerHtml="<{{tagName}}></{{tagName}}>"></h1>
</div>

{{x}}-{i}
{{getFromCharCode（i）}

如果我在

p

标签中有很多内容怎么办？我已经发布了

p

标签作为示例。但是如果我在div中有一个

div

和几个其他标记怎么办？没有问题，您可以使用innerHtmlPlease查看@BlakeMumford，感谢您的重复，但我仍然感到困惑，如果我在变量中有全部内容，则InnerHtml方法将起作用。但事实并非如此。我只有标签名，标签内的内容是在HTML文件中硬编码的。您可能希望包含一个要显示的HTML示例，因为我发现很难理解您想做什么。

<h1 [innerHTML]="tagName">

<div *ngFor="let x of somevalues; let i = index">
  {{x}} - {{i}}
  {{ getFromCharCode(i) }}
  <h1 innerHtml="<{{tagName}}></{{tagName}}>"></h1>
</div>