<a (click)> 在一个字符串中

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

无论如何这都行不通（要求的形式）
HTML 将被转义 - 它将是 "tekst" 而不是标记
要以这种形式注入 HTML，您必须禁用消毒剂
要使 (onClick) 工作，它必须是 a 标签上的普通 javascript onClick=javascript call，因为 Angular 的绑定不是在字符串上完成

Answer 2

这样试试：

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>

<a (click)> 在一个字符串中

<a (click)> in a string

typescript

angular-components

angular