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

Question

假设我有一个包含第三方库的Angular 2应用程序，比如Leaflet Mapping API，它有自己的DOM管理。

从Angular调用第三方库组件我有工作。

但是，在Leaflet示例中，如果我想呈现我的一个Angular组件/ inside /由第三方库呈现的某些标记，该怎么办。

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

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

Answer 1

是的，如果您动态实例化组件，则可以将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的plunker。

你可以阅读一下这篇文章中动态组件：

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