将 HTML 的小片段动态添加到 DOM - Angular 4答案

【问题标题】：Dynamically add small snippets of HTML to DOM - Angular 4将 HTML 的小片段动态添加到 DOM - Angular 4
【发布时间】：2017-11-21 16:44:41
【问题描述】：

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

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

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

【问题讨论】：

【解决方案1】：

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

<div [innerHTML]="myHtml">

Angular 不会以任何方式处理添加的 myHtml 字符串（无绑定、无组件、指令……）

【讨论】：

【解决方案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>

【讨论】：

如何在 Angular 中获得document？
@RomanC document 是 JavaScript 的原生特性。据我所知，Angular 与 JavaScript 集成。此外，该问题被标记为 JavaScript。
它在typscript中不起作用，你能创建一个plunker吗？
不是我的问题，而是OP的问题，你的回答错了就这样。
@RomanC 引用 OP，我有一个无序的
列表元素，我想从我的 Javascript 中添加项目。
强调 Javascript。我不知道你为什么在标签 TypeScript 中编辑，这个问题根本不是这样的。