angular - 如何在其中动态创建带有 ngif 的元素

Question

我正在向文档中添加元素，我想添加这个 <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);

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

Answer 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();
}