如何在其中动态创建带有 ngif 的元素答案

【问题标题】：How to dynamically createelement with ngif in it如何在其中动态创建带有 ngif 的元素
【发布时间】：2021-07-27 05:55:57
【问题描述】：

我正在向文档中添加元素，我想添加这个元素 <button *ngIf="isPlaying()" (click)="backward15Sec()" class="control-btn backward-btn" [ngClass]="{'disabled':!isBackwardBtnEnabled()}"></button>

const btnElem = document.createElement("button");       
btnElem.className = "control-btn backward-btn";
btnElem.addEventListener('click', (e) => {
    this.backward15Sec();//your typescript function
});
document.getElementById("userDetails").appendChild(btnElem);

如何以编程方式添加*ngIf= 和[ngClass]=？
为什么在以编程方式设置类名时，类名的 css 样式不采用？

【问题讨论】：

你为什么要创造这样的元素？你能解释一下吗，因为可能有 Angular 方法。
@Silvermind 这是产品需求的一部分，我们通过推送从多个来源获取信息，当它们到达时，我们分析、处理和操作数据，并决定在仪表板中显示哪些元素。没有我们可以使用的 html 或模板，我们必须在每次数据到达时构建它
@Silvermind 你没抓住重点。问题不在于任何特定元素或特定案例，它可以是具有任何属性 &property 的任何元素!!!。我需要动态地以编程方式附加/绑定不属于元素（没有设置器）的属性和属性，例如 ng* (ngif/ngfor/ngClass/ ...)，并且 css 类中定义的样式适用于它们（目前没有）。总结：它与图像、按钮或任何元素无关，它与 *ng 和样式有关。如果您真的想提供帮助，请相信我知道我需要什么并通过代码示例提供帮助。

标签： angular angular-ng-if createelement angularjs-ng-class

【解决方案1】：

在问题代码中，您自己创建元素，没有角度上下文或类似的东西。你不能只对这些元素应用指令。相反，您可以跟踪 ended 字段的更改并随时添加/删除元素

set ended(val) { 
  if(val) {
    this.reattachElement();
  } else {
    this.removeElement();
  }
}
elementToRender = ...; // your element will be here;
reattachElement() {
   document.getElementById("userDetails").appendChild(this.elementToRender);
}
removeElement() {
   this.elementToRender.remove();
}

【讨论】：