如
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(或其部分,甚至是单个元素)并在需要时执行组件初始化？
除了清理之外,Angular2不处理以任何方式动态添加的HTML.
传递’< a routerLink =“/ my-route”> GoTo Route< / a>‘ innerHTML正是这样做的,将这个字符串传递给DOM,但没有别的.没有实例化或应用routerLink指令.
如果需要动态添加使用Angular2绑定,指令或组件的HTML,可以将HTML添加到组件模板,并使用ViewContainerRef.createComponent()动态添加此组件,例如在Angular 2 dynamic tabs with user-click chosen components中演示
