Question

我将HTML内容作为字符串

var content = "some text <b>in bold</b>"

我在

中很好地输出了它

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

避免对HTML进行清理，正如预期的那样，我将其加粗。

但是我需要的不只是粗体：链接

var content = "some <a (click)='aMethod()'>link</a> here"

当然不起作用，因为(click)未编译。我有很多内容，所以我需要将此html存储在字符串中。我该怎么办？

我无法将HTML代码存储在组件中，我将有数十个，应该使用HostListeners吗？

Answer 1

尝试这样：

Working Demo

.ts

import { DomSanitizer } from "@angular/platform-browser";

export class AppComponent {
  content: any;
  constructor(private sanitizer: DomSanitizer) {
    Window["AppComponent"] = this;
    this.content = this.sanitizer.bypassSecurityTrustHtml("some <a onClick='Window.AppComponent.aMethod()'>link</a> here");
  }


  aMethod() {
    alert("aMethod clicked");
  }

  ngDestroy(){
    delete  Window["AppComponent"];
  }
}

.html

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

Answer 2

无论以什么形式（以必需的形式），这都不起作用
字符串中的HTML将被转义-这将是“ tekst”而不是标记
要以这种形式注入HTML，您必须禁用sanitaizer
要使(onClick)正常工作，它必须是onClick=javascript call标签上的普通javascript a，因为Angular的绑定不是在字符串上完成的。

字符串中的<a（点击）>

2 个答案: