Angular - 如何使 Angular 解析净化的 html答案

【问题标题】：Angular - how to make angular parse sanitized htmlAngular - 如何使 Angular 解析净化的 html
【发布时间】：2019-04-06 22:04:05
【问题描述】：

在我的组件模板中，我的代码如下所示：

  <div [innerHtml]='sanitizedHtml'></div>

在组件声明中：

let unsafeHtml = '<a routerLink="/some-other-page"> Link </a>';
this.sanitizedHtml = sanitizer.bypassSecurityTrustHtml(unsafeHtml);

检查呈现页面中的 HTML 内容，我可以看到生成的 DOM，但是当我单击链接时，没有任何反应。我希望，那个角度忽略了routerLink 指令并且什么也没做。

有什么办法可以解决这个问题？

我可以将routerLink 更改为简单的href，但在后一种情况下，浏览器会重新加载整个页面，而我想在我的 Angular 应用程序中导航。

【问题讨论】：

我敢肯定，如果您将 RouterModule 定义为与 useHash: true 一起使用，并拥有您的 <a href="#your-route">，那么您的这种尴尬想法可能会奏效，但这一切看起来就像您在破解你在一个角度应用程序中的方式。你想达到什么目的？为什么需要使用动态 HTML 而没有 Angular 做繁重的工作？
您是否尝试过使用管道而不是直接调用 sanitizer？见this demo
@Stavm，我同意这是黑客行为，我们不打算长期这样做。我只是在寻找一个简单的临时 hack :)

【解决方案1】：

将 HTML 放入 TS 中的字符串是非常糟糕的设计。 Angular 应该如何知道任何字符串是否可能包含不安全的 HTML 而无需评估每一个？这会很疯狂。

在内部，Angular CLI 正在对所有文件运行文件观察器，但它们背后的工作非常不同。由于角度解析嵌套元素和范围 css，许多实际输出标记也将被操纵。它并不总是呈现实际页面，这在此处是必要的，以找出某个 TS 文件中是否存在定向隐藏。

“Angular 方式”基本上禁止你使用innerHTML 指令。您可以使用ng-content 将 html 投影到另一个组件中：

component1.ts

<div class="comp-1">
  <ng-content></ng-content>
</div>

component2.ts

<component1>
  <a routerLink="..."></a>
</component1>

将渲染

<div class="comp-1">
  <a routerLink="..."></a>
</div>

但这假设您可以将静态字符串标记转换为组件。然而，我认为唯一的方法是在不编写自定义预处理器的情况下也是可行的。

【讨论】：