如何使Angular 2选择动态添加routerLink指令

前端之家收集整理的这篇文章主要介绍了如何使Angular 2选择动态添加routerLink指令前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
this plunker所示,我正在动态地向我的一个元素添加一个HTML,其归结为: @H_502_1@@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(或其部分,甚至是单个元素)并在需要时执行组件初始化?

@H_403_8@
除了清理之外,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中演示

原文链接:https://www.f2er.com/angularjs/141798.html

猜你在找的Angularjs相关文章