Angular 如何在角组件中包含变量h1..h6元素？

目前，我正在使用

ngSwitch

根据变量生成标题HTML元素，但它非常冗长，而且是多余的：

{{value}}
{{value}}
{{value}}
{{value}}
{{value}}
{{value}}

---

有更好的办法吗<代码>{{value}}不起作用。

如果您不介意将header元素包装到div中，这将起作用 或者，您可以使用视图子对象捕获父对象，并使用渲染器将其附加到父对象上

组件

export class AppComponent {

  public headerLevel = 'h1';
  public value  = 'Dynamic Content';

  constructor() {
  }

  getElement() {
    return `<${this.headerLevel}>${this.value}</${this.headerLevel}>`
  }
}

导出类AppComponent{
公共总部级别='h1'；
公共价值='动态内容'；
构造函数（）{
}
getElement（）{
返回`${this.value}`
}
}

Html

<div [innerHTML]="getElement()">
</div>

---

受另一个答案的启发，以下方法非常有效：

会起作用吗？或者
？回答我自己的问题：确实如此！我会放span而不是div