在Angular 2中，有没有办法在字符串中进行Angular绑定

Question

如果我使用路由构建HTML模板，就像这里

一样

<ul class="sb-sub-menu">
    <li>
        <a [routerLink]="['clientadd']">Client Add</a>
    </li>
</ul>

这正如我所料。

但是，如果我从HTML格式的字符串构建动态UI，则路由似乎不适用。

<ul class="sb-sub-menu" [innerHTML]="links"></ul>

其中

links: string = `
<li>
   <a [routerLink]="['clientadd']">Client Add</a>
</li>`

在我的情况下，链接列表更复杂，我想看看是否有办法将它们作为模板化HTML加载，而不是需要创建模型。

是否有这样的方法来加载模板化的HTML字符串并使路由工作？

Answer 1

Angular不以任何方式处理动态添加的HTML。没有绑定，没有指令或组件实例化，......除了出于安全目的的清理。

您可以使用ViewContainerRef.createComponent()动态添加组件，如Angular 2 dynamic tabs with user-click chosen components

中所述

如果您确实需要动态HTML（例如用户提供的），您可以使用How to realize website with hundreds of pages in Angular2中解释的方法

Answer 2

您可以尝试使用*ngFor动态创建链接，而不是使用innerHtml

例如

<ul class="sb-sub-menu">
  <li *ngFor="let item of menuItems">
    <a [routerLink]="[item.url]">{{item.label}}</a>
  </li>
</ul>