Question

我有以下简单的angular2组件

 @Component({
    selector: 'dynamic-info-template',
    template: '<div id=\"dynInfoTemplate\">dynamic info template<a href="javascript:void(0);" (click)="navigateTo()">Link</a></div>'

})
export class DynamicInfoTemplateComponent {

    constructor(private navigationSvc: NavigationService) {}

    public navigateTo():void{
        this.navigationSvc.navigateTo("/test", 1);
    }
}

现在的挑战是，我需要将此组件移动/重新定位到另一个div，后来由第三方组件（不是Angular2组件！）初始化。< / p>

简单地使用jQuery复制.html()不起作用（好吧，它确实有效，但(click)事件之类的事件不会。

$(".targetPopup .contentPane").html($("#dynInfoTemplate").html())

我知道这整个方法都不会赢得一场精彩的代码竞赛，但是第三方组件没有办法，因为它没有正式的角度兼容，我需要一个“hacky”解决方案。

Answer 1

您只需按照3个步骤即可使用

从＆＃39; ./路径导入{DynamicInfoTemplateComponent}来自其他组件＆＃39;。
在@Component中使用提供者：[DynamicInfoTemplateComponent]。
只需使用

<dynamic-info-template></dynamic-info-template>

即。选择器，您希望在哪里显示数据。

将Angular2组件移动到另一个位置

1 个答案: