Ссылка маршрутизации не работает в динамическом html angular 8

это мой машинописный код

getFeatureMenu()
  {
    this.featureService.getAllFeatures().subscribe(data =>
    {

        this.featureData=data;
        for(var i=0;i<data.length;i++)
         {
             this.theHtmlString+="<li class='nav-item'><a [routerLink]='['/admin/feature']' ng-reflect-router-link='/admin/feature' routerLinkActive='active' class='nav-link'  (click)='show()'><i class='flaticon-dashboard'></i><span>Feature 1</span></a></li>";
         }
     
      });
  }

это мой Component.html

   <div class="sidebar-menu-content"  id="MainMenuList">

       <ul class="nav nav-sidebar-menu sidebar-toggle-view" [innerHtml]="theHtmlString" >

</ul>
</div>

Сценарий: я вызываю getallfeature api, и он дает мне список функций. Теперь я создаю это динамически и устанавливаю innerhtml в .Feature, показанном в моем списке, но я не вижу ссылку на маршрутизатор в html, поэтому, пожалуйста, дайте мне знать, как я могу достичь это? Также я не хочу использовать это

template:
<Div>
<a [routerLink]=["/comp11"]> Crisis Center </a>
<a <routerLink]=["/comp12"]> Heroes </a>
<a [routerLink]=["/comp21"]> Heroes </a>
<a <routerLink]=["/comp22"]> Heroes </a>
</ Div>
,})