如何在 Angular 5+ 中将 JavaScript 附加到 div？答案

【问题标题】：How to append JavaScript to div in angular 5+?如何在 Angular 5+ 中将 JavaScript 附加到 div？
【发布时间】：2019-08-01 06:14:34
【问题描述】：

我想在 div 标签中附加 htmlString。

app.component.ts 文件，

public htmlString:string = '';

this.htmlString:string = '<img id="img" src="assets/imgages/image.jpg">
<script>
  document.getElementById("img").onclick = function(){
      alert('click on image');
  };
</script>';

app.component.html

 <div></div>

我使用了以下代码，但脚本以纯文本形式返回。

<div [innerHTML]="htmlString"></div>

如何解决？

【问题讨论】：

标签： javascript angular event-binding

【解决方案1】：

你不能那样做。 Angular 完全忽略了 <script> 标签。来自docs：

HTML 是 Angular 模板的语言。几乎所有的 HTML 语法是有效的模板语法。 <script> 元素是一个明显的例外；禁止，消除脚本注入攻击的风险。在练习，<script> 被忽略并在浏览器中出现警告控制台

要根据 click 事件显示内容，您可以执行以下操作：

.ts

export class AppComponent {
  displayData: boolean;
  content: string = 'Something to be displayed on click event';

  appendData() {
    this.displayData = true;
  }
}

.html

<img id="img" src="assets/imgages/image.jpg" (click)="appendData()">

<div *ngIf="displayData">
  {{content}}
</div>

这是stackblitz 。

【讨论】：

编辑了答案以包含一个琐碎的示例。（共享的代码可以更短，但更容易阅读）
如果 Angular 禁止它；那么 IMO 这是有原因的，我认为我们不应该试图绕过它。
如果答案对你有帮助；请考虑支持/接受它。谢谢！

【解决方案2】：

作为一种简单的解决方法，您可以这样尝试：

HTML：

<div (click)="showAlert()">
  <div [innerHtml]="htmlString"></div>
</div>

TS：

 htmlString: any = '<img id="img" src="assets/imgages/image.jpg">'

 showAlert(){
    alert('click on image');
 }

【讨论】：