可以從第三方庫中渲染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