将angular2组件插入本机DOM

时间:2015-12-09 09:24:19

标签: innerhtml angular

我在我的应用程序中使用了用于Windows系统的DHTMLX库。

在Angular1中,我做了类似的事情:

var windows = new dhtmlXWindows();
var wnd = windows.createWindow();
var new_scope = $rootScope.$new();
var content_dom = angular.element($compile('<div>Content</div>')(new_scope))[0];
wnd.attachObject(content_dom);

是否有可能在Angular2中做同样的事情? 我想我应该使用DynamicComponentLoaderloadIntoLocation,但我不明白我应该在loadIntoLocation函数的参数hostLocation和{{{{}}中加入什么1}}。

1 个答案:

答案 0 :(得分:1)

我找到了这个解决方案。它有效,但我不确定这样做是否正确。

@Component({
    selector: 'app',
    template: `
      <div #windows></div>
    `
})
class EnviromentComponent {}

var app = bootstrap(EnviromentComponent);

app.then(function (componentRef) {
    var dynamicComponentLoader:DynamicComponentLoader = componentRef.injector.get(DynamicComponentLoader);

    dynamicComponentLoader.loadIntoLocation(MyComponent, componentRef.location, 'windows').then(function(elementRef) {
        var wnd = new dhtmlXWindows();
        wnd.attachObject(elementRef.location.nativeElement);
  });
});