将 angular2 组件插入本机 DOM答案

【问题标题】：Inserting angular2 component into native DOM将 angular2 组件插入本机 DOM
【发布时间】：2016-03-14 12:02:44
【问题描述】：

我在我的应用程序中使用 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 中做同样的事情？我想我应该使用DynamicComponentLoader 和loadIntoLocation，但我不明白我应该在loadIntoLocation 函数的参数hostLocation 和anchorName 中添加什么。

【问题讨论】：

标签： innerhtml angular

【解决方案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);
  });
});

【讨论】：