使用angular2動態數據插值字符串

我正在通過ajax請求從服務器加載數據。 JSON文件具有網站中彈出窗口的配置。使用angular2動態數據插值字符串

popupData: { 
    data:{ var_one: "hello", var_two: "world"}, 
    template: "the <b>{{var_two}}</b> say's {{var_one}}" 
}

變量名稱和模板對於彈出窗口的每次出現都不相同。

我怎樣才能得到這個字符串內插的數據呢？我需要將預建的字符串傳遞給使用[innerHTML]查看的組件。

來源

2017-04-10 Mike Roberts

我可能會缺少一些東西，但模板字面不會幫助嗎？ 'template \'$ {var_two} say's $ {var_one} \'' –

您無法將模板存儲在JSON中 –

您可以使用良好的ol選擇器來執行此操作。我有一個彈出組件，它只是一個我加載html片段的shell（我在路由器url片段中傳遞一個值，在彈出組件中讀取它，並將指定的html頁面/片段作爲內容加載）。如果我需要將可變數據加載到該片段中，則只需使用一個選擇器：querySelector（'#popup_some_style_or_id_selector'）.innerHTML。= [無論您想要什麼值]。在Angular 1中，該加載的片段可以使用ng-include並訪問控制器中的val。這不會在盎格魯2/4。 Angular仍然需要解決這個問題。 –

後的某個數據被接收：

const popupString = popupData.template.replace(
    /{{\s?([^{}\s]*)\s?}}/g, 
    (substring, parsedKey) => { 
    const replacer = popupData.data[parsedKey]; 
    return typeof replacer !== 'undefined' ? replacer : substring; 
    } 
);

應該在你的榜樣等於the <b>world</b> says Hello。

請注意，此代碼來自robisim74’s angular-l10n（MIT許可證）。

來源

2017-04-10 18:44:24 gsc

它的工作原理！雖然我希望有更多內置的角色。我的其他選擇是使用小鬍子或車把模板。這似乎很奇怪，你必須在角度內滾動你自己的插值。 –

使用angular2動態數據插值字符串

回答

相關問題