如何在 angular 中绑定锚标签

Question

in my angular application, i am trying to bind a string to a div using angular innerHTML, Here is the string

sample = "<a routerLink='/tags/name/'>Test</a>  smod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam";
    

here is the html page

<p [innerHTML]="sample"></p>

Now my problem is that the anchor tag is now working, it only displays the Test but i cant click it to navigate to the other page, how can i make it to work.

Answer 1

The routerLink selector is an Angular specific property, which means it probably won't work when it's bound as raw HTML in an element.

You're better off doing something like this:

HTML

<p>
  <a [routerLink]="myLink">{{myLinkLabel}}</a> 
  {{myLabel}}
</p>

Typescript

myLink = ['/something/here'] // Links have to be arrays
myLinkLabel = 'Test'
myLabel = 'smod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'

Answer 2

I think the best approach is to sanitize the html and use a directive to handle the click event.

Look at that answer https://stackoverflow.com/a/49006667/5264995 .