Angular <；a（单击）>；一串

我有HTML内容作为字符串

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

var content=“一些粗体文本”

我把它输出得很好

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

避免HTML清理，我得到了预期的效果

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

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

var content=“此处的某些链接”

当然，它不起作用，因为未编译

（单击）

。我有很多内容，所以我需要以字符串形式存储这个html。我怎么办

我不能将HTML代码存储在组件中，如果我使用

HostListeners

，我会有几十个组件

无论发生什么情况，这都不起作用（以要求的形式）

字符串中的HTML将被转义-它将是“tekst”而不是标记

要以这种形式注入HTML，必须禁用sanitaizer

要使

（onClick）

工作，它必须是

a

标记上的普通javascript

onClick=javascript调用，因为Angular的绑定不是在字符串上完成的

试着这样做：

.ts

从“@angular/platform browser”导入{domsanizer}”

导出类AppComponent{
内容：任何；
构造函数（专用消毒器：DomSanitizer）{
窗口[“AppComponent”]=此；
this.content=this.sanitizer.bypassSecurityTrustHtml（“此处的某些链接”）；
}
阿莫德（）{
警报（“点击了aMethod”）；
}
ngDestroy（）{
删除窗口[“AppComponent”]；
}
}

.html


我不能让HTML代码存储在组件中，我会让几十个组件不用。此外，对于小型应用程序来说，拥有十几个组件是很正常的：）我不确定您试图描述的问题。如果您需要绑定到许多东西，请围绕这些东西设计应用程序。。。不管是什么。但我不建议你在这个世界上做任何奇怪的事情。您最好放弃框架，使用一些。。。不那么强壮。你试过这个解决方案吗？非常感谢你，阿德丽塔，你救了我！欢迎：）请投票并接受答案，如果有帮助的话！显然，它打破了模型依赖性。在这个aMethod（）中，如果我设置了``this.varTest=aaa``它不会反映在dom中：`{{varTest}}}``在这里显示nothing@shawee谢谢通知，我会调查的
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"];
  }
}

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