如何在angular2+的'innerHTML'中的锚标记中使用routerLink而不是href？

Question

In angular 2+

1. If I'm using href to redirect then it reloads the whole page .

In .ts

this.htmlText = 'The validation window for <a href=\"http://localhost/nomination/">Innovator Mind</a> nominations is open now. Last date to review is 2020-Jan-25';

in HTML ,

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

2. If I'm using routerlink to redirect then routerlink does not get render in html.

In .ts

this.htmlText = 'The validation window for <a routerLink=\"http://localhost/nomination/">Innovator Mind</a> nominations is open now. Last date to review is 2020-Jan-25';

in HTML ,

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

So how to achieve the route the page without reloading the page?

Answer 1

add in constructor.

private router: Router

Use click event for change url by ts ->

.ts:

   html='<a value="myRoute">link</a>';

   changeRoute(value){
     let myRoute=value.target.attributes.value.value;
      if(myRoute){
       this.router.navigate([ myRoute ]);
      }
   }

.html :

<div (click)='changeRoute($event)' [innerHTML]="html"> </div>