如何在 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

您可以使用innerHTML

在你的组件中：

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

在您的模板中：

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

Answer 2

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

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

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

使用把手渲染 message 只是渲染纯文本，绑定到 innerHTML 并使用 async 将渲染您的 html 内容

Answer 3

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

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

并在您的 .html 文件中：

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

How to render a hyperlink in a component template in Angular 6?