时间戳

首页 > 解决方案 > 如何使用 ts 中的变量作为 HTML 文件中的标记名？

html - 如何使用 ts 中的变量作为 HTML 文件中的标记名？

问题描述

我想知道是否有任何方法可以使用HTML tag name (<p> for e.g.)从变量中获得的？

以下是我尝试的代码：

app.component.ts

import { Component,OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  name = 'Angular';
  somevalues = [1, 2, 3, 4, 5]
  tagName;
  getFromCharCode(index) {
    return String.fromCharCode('A'.charCodeAt(0) + index);
  }
  ngOnInit(){
    this.tagName = "p";
  }
}

app.component.html

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

如果我尝试这样：

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

我收到类似的错误

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

我提到了这个，但我发现它对于一个简单的替换来说非常复杂。有没有其他方法可以实现这一目标？

EDIT-1：你们中的许多人建议使用innerHTML，但在小内容的情况下这是可行的。在我的典型情况下，我希望将所有 html 内容放在同一个文件中，并且我只会获得文件ts中标签的名称

标签： htmlangulartypescriptreplacestring-interpolation

解决方案

您可以为此使用innerHTML ：

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

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

推荐阅读