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

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);
    }
}

现在的挑战是，我需要将这个组件移动/重新定位到另一个稍后由第三方组件(不是Angular2组件!)初始化的div。

简单地用jQuery复制.html()是行不通的(好吧，它确实可以工作，但是像(click)事件这样的事件不会。

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

我知道这整个方法不会赢得漂亮的代码比赛，但是没有办法绕过第三方组件，因为它不是官方的angular2兼容，我需要一个"hack"的解决方案。

Answer 1

你只需要遵循3个步骤就可以使它工作

• 导入{DynamicInfoTemplateComponent}/path from other component'。
• 在@Component中使用providers:[DynamicInfoTemplateComponent].
• 在@Component的模板中只使用

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

ie。