将 angular2 组件插入本机 DOM

Posted 2023-05-07

【中文标题】将 angular2 组件插入本机 DOM

【英文标题】：Inserting angular2 component into native 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 中添加什么。

【参考方案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);
  );
);