使用 Typescript 和 Angular 在特定 div 类名之后插入 HTML 元素答案

【问题标题】：Insert HTML element after a specific div class name with Typescript & Angular使用 Typescript 和 Angular 在特定 div 类名之后插入 HTML 元素
【发布时间】：2017-07-06 21:16:29
【问题描述】：

我想要做的是在 div 中插入一个组件，在具有特定类名的特定 div 之后。我如何在打字稿中做到这一点？

<div class ="{{order.orderId}}">
    <div class="enter-here"></div>
<other html elements here>
</div>

还有 TypeScript：

 insertDiv(){
    insert.component.after.className.enter-here;
 }

【问题讨论】：

你马上关闭第一个div，不应该最后关闭吗？例如：<div class ="{{order.orderId}}"> <div class="enter-here"></div></div>
你是对的 Dhyey，我改变了问题。谢谢。
你能告诉我们<div class="enter-here"></div>的内容吗？ eg：简单的文本，用ngFor等生成的列表。

标签： html angular typescript

【解决方案1】：

插入新元素不是angular 的做法，在使用角度DOM 操作时应尽可能避免。在您的问题中，您没有提到.enter-here 的内容是什么，所以我假设它只是纯文本：

在您的 html 中：

<div class ="{{order.orderId}}">
    <div *ngIf="showEnterHereDiv" class="enter-here">
      some text or list which should be visible after showDiv is called
    </div>
    <other html elements here>
</div>

在你的打字稿中：

// hidden by default
showEnterHereDiv: boolean = false;

...

showDiv() {
    // call this method to show the div
    this.showEnterHereDiv = true;
}

hideDiv() {
    this.showEnterHereDiv = false;
}

【讨论】：