动态添加一小段 HTML 到 DOM - Angular 4

Question

我有一个无序<ul>列表元素，我想从我的Javascript中添加项目。只是小而简单的片段，例如 <li>Label: Text</li> .

我可以使用ViewContainerRef.createComponent(ItemComponent)并为列表项创建一个新组件，但是当我只想将如此简单的 HTML 片段插入 DOM 时，我觉得这太过分了。

当不需要完整组件时，将这些类型的简单、简短的 HTML 片段添加到 DOM 的最佳方法是什么？

Answer 1

myHtml = '<li>Label: Text>/li>

<div [innerHTML]="myHtml">

添加的myHtml字符串不会以任何方式由 Angular 处理(没有绑定、没有组件、指令......

另请参阅角度 2 html 绑定

Answer 2

你不需要 Angular 来做到这一点。

function addItem() {
  document.getElementById("list").innerHTML += "<li>Item 3</li>";
}

<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button onclick="addItem()">Add item</button>