サードパーティのライブラリからDOM要素の中にAngular 2 Componentsをレンダリングできますか？

Question

リーフレットマッピングAPIなどのサードパーティ製のライブラリをラップするAngular 2アプリを所有しているとします。これは独自のDOM管理です。

Angularからサードパーティライブラリコンポーネントを呼び出す私は働いています。

リーフレットの例では、サードパーティライブラリによってレンダリングされた角型コンポーネント/内側/マークアップのいずれかをレンダリングしたい場合はどうしますか？

たとえば、リーフレットポップアップの内側にある角度2アプリからコンポーネントをレンダリングすることは可能ですか？ http://leafletjs.com/reference-1.1.0.html#popup

一般的に、Angularの「外側」のDOM要素への参照がある場合、そのDOM要素にAngularコンポーネントを追加して管理するためのAPIがありますか？

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