どのようにして配列の要素ごとにAngularで異なるコンポーネントをレンダリングできますか？

Question

外部サーバーからの応答に基づいて内容を動的に表示しようとしています。

現在のところ、実装は非常に簡単で、サーバーは純粋なテキスト要素またはボタンのいずれかに対応するテキストを含むJSON値を返します。この簡単なセットアップで

[{ 
    "type": "text", 
    "data": "Hello" 
}, { 
    "type": "button", 
    "data": "World" 
}] 

、textタイプは<b>要素とbuttonタイプは<button>要素をレンダリングする必要がありますレンダリングする必要があります。しかし、将来的には、より多くのフィールドを持つより大きなテンプレートをレスポンスに使用する予定です。

このレスポンスに基づいて、ページの内容を順番にレンダリングし、その結果を次のようにしたいと思います。

<b>Hello</b> 
<button>World</button> 

私は1つが異なるコンポーネント型の配列を使用して、しかし、これを実現する方法をわからないのです。

この結果を得るにはどうすればよいでしょうか？

Answer 1

私はあなたのニーズに答える簡単なプロトタイプを作った。
jsonレスポンスの結果（一部ではflagsを使用）に各アイテムをマップして、使用する正しいhtmlタグを決定する必要があるという基本的な考え方です。
その後、開始タグと終了タグを文字列の先頭と末尾に追加することを忘れずに、各アイテムのデータを構築タグに連結する必要があります。
最後に、作成した文字列をコンポーネントのテンプレートのinnerHTMLに追加します。

const flags = { 
    text: 'b', 
    button: 'button', 
}; 

@Component({ 
    selector: 'example', 
    template: '<div></div>', 
}) 
export class Example { 

    public serverResponse = 
    [{ 
     "type": "text", 
     "data": "Hello" 
    }, { 
     "type": "button", 
     "data": "World" 
    }]; 

    private myTemplate: string = ''; 

    constructor(private elem: ElementRef) { 
    this.templateBuilder(); 
    this.elem.nativeElement.innerHTML = this.myTemplate; 
    } 

    private templateBuilder() { 
    this.serverResponse.forEach((object) => { 
     this.myTemplate += `<${flags[object['type']]}>${object['data']}</${flags[object['type']]}>\n`; 
    }); 
    } 

} 

これはかなりです。それが役に立てば幸い！！