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

Vin*_*ini 1 javascript typescript angular angular6

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

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

预期的消息显示:

点击这里

实际消息显示:

点击<a href=' http://www.google.com '>此处</a>

Nei*_*ens 5

如果要呈现 HTML a,则需要绑定到innerHTML元素的属性,例如:

<p [innerHTML]=“message | async”></p>
Run Code Online (Sandbox Code Playgroud)

哪里message是从服务您观察到的。

使用把手渲染message只是渲染纯文本,绑定到innerHTML和使用async将渲染你的 html 内容