如何动态插入带有角度绑定的html

Question

我正在开发 Angular 8 应用程序，我想在我的页面中插入带有角度绑定的 HTML。

所以，我的html代码是：

<button (click)="insertHtml()">Insert</button>
<div id="text"></div>

我的角码是：

insertHtml() {
    document.getElementById("text").innerHTML = '<span (click)="handleClick(' + this.item.id + ')" [hidden]="' + this.item.hidden + '">'
}

Html 看起来不错，但没有显示正确的 css 类和点击处理程序。

我可以动态插入带有角度绑定的 html 吗？如果是，我做错了什么？

Answer 1

您可以使用另一种方法（类似这样）：

<button (click)="showHtml()">Insert</button>
<ng-container *ngIf="clicked">
 <div id="text"><span (click)="......" [hidden]="' + ...... + '">'</div>
</ng-container>

在你的 .ts 你做：

 @Input()
clicked:boolean =false;

showHtml(){
 this.clicked=true;
}

它必须有效。