angular - 如何让 Angular 2 获取动态添加的 routerLink 指令

Question

如 this plunker 所示，我正在向我的元素之一动态添加 HTML，归结为:

@Component({
    selector: 'my-comp',
    template: `<span [innerHTML]="link"></span>`,
}) export class MyComponent {
    private linkContent = '<a routerLink="/my-route">GoTo Route</a>';
    private link;

    constructor(sanitizer: DomSanitizer) {
        this.link = sanitizer.bypassSecurityTrustHtml(linkContent);
    }
}

这导致 <a routerLink="/my-route">GoTo Route</a>被添加到 DOM，但 Angular 对 routerLink 一无所知该元素上的指令，并且不“绑定(bind)”到它。因此，当您单击该链接时，它会导致通过重新 Bootstrap 完全重新加载(这在 plunk 中不起作用，它只会给出 404)。

问题:如何告诉 Angular 遍历 DOM(或其部分，甚至单个元素)并在需要时执行组件初始化？

Answer 1

Angular2 不处理以除净化之外的任何方式动态添加的 HTML。

传递 '<a routerLink="/my-route">GoTo Route</a>'至 innerHTML正是这样做的，将这个字符串传递给 DOM，但没有别的。没有 routerLink正在实例化或应用的指令。

如果您需要动态添加使用 Angular2 绑定(bind)、指令或组件的 HTML，您可以将 HTML 添加到组件模板，并使用 ViewContainerRef.createComponent() 动态添加此组件。就像在 Angular 2 dynamic tabs with user-click chosen components 中演示的那样