<a (click)> 在字符串中答案

【问题标题】：<a (click)> in a string<a (click)> 在字符串中
【发布时间】：2020-03-07 09:58:15
【问题描述】：

我有 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吗？

【问题讨论】：

我不能将我的 HTML 代码存储在组件中，我会有几十个不要使用 angular than。此外，对于小型应用程序来说，有十几个组件是很正常的:)
我不确定您要描述的问题。如果您需要绑定到许多东西，请围绕这些东西设计应用程序......无论它们是什么。但我不推荐你在 Angular 中尝试做的任何奇怪的事情。您不妨放弃框架并使用一些...不太健壮的东西。
你试过解决方案了吗？

标签： angular typescript angular-components

【解决方案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>

【讨论】：

非常感谢阿德里塔，你救了我！
不客气 :) 如果有帮助，请点赞并接受答案
完成！显然它打破了模型依赖性。在这个 aMethod() 中，如果我设置 ``` this.varTest=aaa ``` 它不会反映在 dom 中：```
{{varTest}}
``` 这里什么都不显示
@shawee 感谢您的通知，我会调查一下

【解决方案2】：

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

【讨论】：