参照としてクラス名を使用してdiv内にコンポーネントを追加する

Question

ViewContainerRefを使用してビューにコンポーネントを追加することは可能です。例については

、 HTMLファイル：

<div #Ref>it is possible to append the component here</div> 

TSファイル：

​​3210

しかし、私の場合は私が動的にクラスとそのインデックスの参照を使用してコンポーネントを追加したいです 例として

HTMLファイル

<div #Ref> 
    <div class="appendComponentHere"></div> 
    <div class="appendComponentHere"> I need to append The component Here</div> 
    <div class="appendComponentHere"></div> 
</div> 

TSは、それは簡単なはず

@ViewChild("Ref", { read: ViewContainerRef }) 
public Ref: ViewContainerRef 

appendComponent() { 
    const factory = this.componentFactoryResolver. 

    //something like this i need to do 

    this.Ref.element .nativeElement.getElementsByClassName("fullslidebody")[1].createComponent(factory); 
} 

Answer 1

ファイル。ただ、次のことを試してください。

const viewRef = this.Ref.createComponent(factory).hostView as EmbeddedViewRef<any>; 

const target = this.Ref.element.nativeElement.getElementsByClassName("fullslidebody")[1]; 
target.appendChild(viewRef.rootNodes[0]); 

Stackblitz Example