可以从第三方库中渲染DOM元素中的Angular 2 Components吗？

假设我有一个Angular 2应用程序,它包装了第三方库,例如Leaflet Mapping API,它自己进行DOM管理.

从Angular调用第三方库组件我已经工作了.

但是,在Leaflet示例中,如果我想渲染我的一个Angular组件/内部/某些标记由第三方库呈现,该怎么办？

例如,是否可以在Leaflet弹出窗口中从我的Angular 2应用程序渲染组件？ http://leafletjs.com/reference-1.1.0.html#popup

或者在一般情况下,如果我引用了Angular的“外部”DOM元素,是否有可用于将Angular组件附加到该DOM元素并进行管理的API？

解决方法

是的,如果动态实例化组件,则可以将DOM元素传递给组件创建方法.此DOM元素将充当新创建的组件的主机.但是,您必须手动触发更改检测. Angular CDK通过引入门户主机解决了这个问题.

这是基本的例子：

@Component({
    selector: 'a-comp',template: `<h2>I am {{name}}</h2>`
})
export class AComponent {
  name = 'A component';
}

@Component({
  selector: 'my-app',template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,})
export class AppComponent {
    name = `Angular! v${VERSION.full}`;
    componentRef;

    constructor(r: ComponentFactoryResolver,i: Injector) {
        const someDOMElement = document.querySelector('.host');
        const f = r.resolveComponentFactory(AComponent);
        this.componentRef = f.create(i,[],someDOMElement);
    }

    ngDoCheck() {
        this.componentRef.changeDetectorRef.detectChanges();
    }
}

Here is the plunker.

您可以在文章中阅读有关动态组件的更多信息：

> Here is what you need to know about dynamic components in Angular