javascript - 如何在 Angular 5+ 中将 JavaScript 附加到 div？

Question

我想在 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>

如何解决？

Answer 1

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

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

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

.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>

这是相同的堆栈闪电战。

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