如何在 Angular 6 中的组件模板中渲染超链接？

Question

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

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

预期消息显示：

点击这里。

实际消息显示：

点击 此处

Answer 1

如果要渲染 HTML，则需要绑定到元素的

innerHTML

属性，例如：

<p [innerHTML]="message | async"></p>

其中

message

是您从服务中观察到的。

使用handlebars渲染

message

只是渲染纯文本，绑定到

innerHTML

并使用

async

将渲染你的html内容。

Answer 2

您可以使用

innerHTML

在您的组件中：

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

在您的模板中：

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

Answer 3

你可以这样使用： 在你的 .ts 文件中：

dummyLinkText: string = "Click <a href='https://www.google.com'>here</a>";

并在您的 .html 文件中：

<div [innerHTML]="dummyLinkText | translate"></div>