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 is the language of the Angular template. Almost all HTML syntax is valid template syntax. The <script> element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. In practice, <script> is ignored and a warning appears in the browser console

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

.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对于同样的。