如 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(或其部分,甚至单个元素)并在需要时执行组件初始化?
最佳答案
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 中演示的那样
关于angular - 如何让 Angular 2 获取动态添加的 routerLink 指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39380460/