在Angular 2中动态渲染HTML

Question

我正在开发一个Angular 2应用程序，其中我创建了一个对话框，当用户单击时会弹出。该对话框中的内容必须以动态方式呈现为html。静态html运行良好，但动态html无法运行。

代码：

<md-dialog-content><h1>Hello Angular 2</h1></md-dialog-content>////It works..

<md-dialog-content>{{test}}</md-dialog-content>///It does not work.

这段代码展示的是文本：'<h1>Hello Angular 2</h1>'

在组件中：

let test = "<h1>Hello Angular 2</h1>";

- Rohan Sampat

---

let = "<h1>Hello Angular 2</h1>"; ?? you have to declare name with let - Pardeep Jain

Answer 1

您可以简单地使用 [innerHTML] 指令来实现它。

<md-dialog-content>
    <span [innerHtml]='test'></span>
</md-dialog-content>

- Pardeep Jain

---

我想在innerHtml中添加一个href。我该怎么做？ - Kriti

仅使用 a 替代 span，这样做有问题吗？并将 href 更改为 routerLink。 - Pardeep Jain

@PardeepJain 我能在像 Ant Design 这样的 UI 框架中使用 innerHtml 吗？例如：test='<nz-table>...</nz-table>' - Quan Truong