如何使用Angular爲陣列中的每個元素渲染不同的組件？

我正在嘗試根據來自外部服務器的響應動態呈現內容。如何使用Angular爲陣列中的每個元素渲染不同的組件？

目前，實現非常簡單，服務器返回JSON值，其中文本對應於純文本元素或按鈕。

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

在這個簡單的設置中，text類型應該呈現<b>元件和button類型應該呈現<button>元件。但是，在未來，我計劃在響應中使用更多的字段。

基於這個迴應，我想順序渲染一個頁面的內容，結果如下。

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

我不確定的人會怎樣做到這一點，但是，使用不同組件類型的數組。

什麼是最好的方法來實現這個結果？

來源

2017-05-28 Harrison Grodin

細化您的帖子以更清晰。混亂。 – Aravind

@Aravind哪個部分特別令人困惑？我很樂意編輯和澄清。 –

你想渲染一個自定義組件多次或多個組件多次？ – Aravind

好吧，我做了一個快速原型，可以滿足您的需求。
其基本思想是您應該映射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`; 
    }); 
    } 

}

這就是它。希望能幫助到你！！

來源

2017-05-28 18:08:57

如何使用Angular爲陣列中的每個元素渲染不同的組件？

回答

相關問題