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

发布时间：2020-12-17 07:22:50 所属栏目：安全来源：网络整理

导读：如 this plunker所示,我正在动态地向我的一个元素添加一个HTML,其归结为： @Component({ selector: 'my-comp',template: `span [innerHTML]="link"/span`,}) export class MyComponent { private linkContent = 'a routerLink="/my-route"GoTo Route/a'; pri

如 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中演示

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!