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指令一无所知，也不会“绑定”它。因此，当您单击该链接时，它会导致完全重新加载并重新引导（在plunk中不起作用，它只给出404）。

问题：如何告诉角度来遍历DOM（或其部分，甚至单个元素）并在需要时执行组件初始化？

Answer 1

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

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

如果您需要动态添加使用Angular2绑定，指令或组件的HTML，您可以将HTML添加到组件模板，并使用ViewContainerRef.createComponent()动态添加此组件，如{{3}中所示。 }

如何使Angular 2拾取动态添加routerLink指令

1 个答案: