動的に追加されたAngular2コンポーネントはレンダリングされませんが、静的に追加されます

Question

ユーザーがボタンをクリックすると、次のメソッドが実行されます。

@ViewChild("privs") privs: ElementRef; 
addPrivs() { 
    this.privs.nativeElement 
    .insertAdjacentHTML('beforeend', '<generic1>yey!</generic1>'); 
} 

マークアップは次のようになります。

<generic1>woosh</generic1> 
<div #privs></div> 

generic1という名前のサブコンポーネントは、次のように宣言して、もちろん、輸入モジュールのに存在しています。

import { Component } from "@angular/core"; 
@Component({ 
    selector: "generic1", 
    template: "<div>mamba...</div>" 
}) 
export class Generic1 { } 

私が得意とするのは、マークアップ内の統計的に作成されたものが想定されていることです。動的に追加されない。私が調査したDOMによれば、タグgeneric1が追加されていますが、Angularによってレンダリングされていません（テキストyey！とタグですが、コンポーネントのレンディションは表示されません）。

私には何が欠けていますか？

私はグーグルで例を挙げましたが、セットアップに間違ったことは特にありませんでした。私の範囲外のものでなければなりません...

Answer 1

実際にはダイナミックコンポーネントを作成していません。 Angularによってレンダリングされない追加のHTMLを挿入しています。そのようなテンプレートにHTMLやテキストを挿入すると、HTMLやテキストが消されるので、レンダリングされたコンポーネントは取得されません。

This answerには、ダイナミックコンポーネントの設定に関する非常に詳細な説明があります。ただし、必要なものをコピー＆ペーストするソリューションではありません。 documentation on Angular.ioには、動的コンポーネントローダーの良い例があります。 Angularコンポーネントを解決して構築するには、基本的にComponentFactoryResolverが必要です。 Angular.ioのドキュメントからの例では、本当の魔法は、この関数の中で起こる：

loadComponent() { 
    this.currentAddIndex = (this.currentAddIndex + 1) % this.ads.length; 
    let adItem = this.ads[this.currentAddIndex]; 
    let componentFactory = this._componentFactoryResolver.resolveComponentFactory(adItem.component); 
    let viewContainerRef = this.adHost.viewContainerRef; 
    viewContainerRef.clear(); 
    let componentRef = viewContainerRef.createComponent(componentFactory); 
    (<AdComponent>componentRef.instance).data = adItem.data; 
    } 

それは、this.adsで保存されたコンポーネントのリストからコンポーネントを取得し、解決してコンポーネントを構築するためにcomponentFactoryResolverを使用しています。 viewContainerRefを取得し、コンポーネントを作成します。

正しい方向に向けるのに役立つことを期待してください。