Angular2任意のHTML要素からTemplateRefを取得

Question

appコンポーネントのどこかにあるHTML要素にコンポーネントを動的に読み込む必要があります。

ViewContainerRef.createEmbeddedView(templateRef)のパラメータとしてTemplateRefを使用して、目的のコンポーネントを動的にロードすることを計画しています。

So I.E.私はそれがこのように見えることを望んでいます。

var myViewRef = this.viewContainer.createEmbeddedView(
    getTemplateRefFromNode(document.querySelector('.anySelector')) 
); 
this.resolver.resolveComponent(myComponent) 
    .then(factory => { 
    var newComponent = myViewRef.createComponent(factory, 0, myViewRef.injector); 
    }); 

Answer 1

これは動作しません。 と関連付けられているTemplateRefがありません。 DOMノードです。 TemplateRefは、<template>要素で作成され、<template>要素のみによって作成された構造です。

「私のアプリケーションコンポーネント内のどこにでもある可能性のあるHTML要素にコンポーネントを動的に読み込む必要があります」という意味が私にはっきりしないため、別の提案を提案するのは難しいです。

Answer 2

コンポーネントのコンテンツ内の任意の場所にコンポーネントをロードしようとしていますか？

もしそうなら、コンポーネントのコンテンツのどこかに要素に#loadLocation属性を置くと、コンポーネントのこのコードはカスタムコンポーネントをその要素に挿入します。

@ContentChild('loadLocation',{read: ViewContainerRef}) loadLocation: ViewContainerRef; 

constructor(private componentFactoryResolver: ComponentFactoryResolver) {} 

ngAfterContentInit() { 
    if (!this.loadLocation) { 
    return; 
    } 
    let componentFactory = this.componentFactoryResolver.resolve(myComponent); 
    let newComponent = this.loadLocation.createComponent(componentFactory); 
}