Angular

Question

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

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

在组件声明中：

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

检查呈现页面中的 HTML 内容我可以看到生成的 DOM，但是当我单击 link 时，没有任何反应。我预计 angular 忽略了 routerLink 指令并且没有对其进行任何操作。

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

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

Answer 1

将 HTML 放入 TS 中的字符串是非常糟糕的设计。 Angular 如何在不评估每个字符串的情况下知道是否有任何字符串可能包含不安全的 HTML？会很生气的。

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

"Angular way" 基本上禁止您使用 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>

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

Angular - 如何使 angular 解析净化 html