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

Question

I have an Angular 6 application where a component is used to display a message on the page. Some of the messages contain hyperlinks embedded in them (in HTML markup). However, when the messages are displayed on the page, they are getting displayed in plain text (hyperlinks are not rendered, but the markup is displayed to the user instead).

You can visit Stackblitz @ https://stackblitz.com/edit/angular-jj5nms for a sample application that I created to explain the issue.

Expected message display:

Click here .

Actual message display:

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

Answer 1

If you want to render HTML a then you need to bind to the innerHTML property of an element, for example:

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

Where message is your observable from the service.

Using handlebars to render message is just rendering plain text, binding to innerHTML and using the async will render your html content

Answer 2

You can use innerHTML

In your component:

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

In your template:

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