javascript - 如何在 Angular 6 的组件模板中呈现超链接？

Question

我有一个 Angular 6 应用程序，其中一个组件用于在页面上显示消息。一些消息包含嵌入其中的超链接(在 HTML 标记中)。但是，当消息显示在页面上时，它们将以纯文本显示(不会呈现超链接，而是向用户显示标记)。

您可以访问 Stackblitz @ https://stackblitz.com/edit/angular-jj5nms对于我为解释该问题而创建的示例应用程序。

预期的消息显示:

Click here.

实际消息显示:

Click <a href='http://www.google.com'>here</a>

Answer 1

如果你想渲染 HTML a 那么你需要绑定(bind)到一个元素的 innerHTML 属性，例如:

<p [innerHTML]=“message | async”></p>

message 是您从服务中观察到的地方。

使用 handlebars 渲染 message 只是渲染纯文本，绑定(bind)到 innerHTML 并使用 async 将渲染你的 html 内容