Angular 2與CLI - 來自不同服務器的組件模板

我有一個特定的用例，其中組件的html模板可以從多個地方加載。Angular 2與CLI - 來自不同服務器的組件模板

例如，

@Component({ 
    selector: 'app-home', 
    template: require('http://xyz/home.component.html'), **// This can be from local or any other server** 
    styleUrls: [require('http://xyz/home.component.css')], 
})

需要幫助理解我怎麼能去這還是我有什麼辦法。

感謝

來源

2017-03-31 Dhaval Maniar

你不能。該模板應該預編譯爲JavaScript，並將結果捆綁在應用程序本身中。不在運行時動態加載。 –

我想知道是否有任何組件的延遲加載（就像我們對模塊有加載一樣）？ –

@DhavalManiar組件工廠按需編譯（當然，如果您還沒有在'@ NgModule'的entryComponents部分聲明組件 - 在這種情況下，它們將在定義模塊時總是被編譯），但組件代碼是始終存在於模塊捆綁中。要獲得模塊加載的最佳體驗，請根據一項功能約定使用一個模塊（請參閱https://angular.io/docs/ts/latest/guide/ngmodule.html#!#feature-modules）。 – metamaker

不能提供模板的URL組件指向不是本地路徑，你不能require不是從本地路徑，但你仍然可以通過從模板內容動態地創建組件實現你想要的。

作爲缺點，您將不得不始終依賴於Angular JIT編譯器而不是AoT編譯器（詳見https://angular.io/docs/ts/latest/cookbook/aot-compiler.html）。你也需要在你的服務器上啓用CORS請求。

你可以做你想做什麼樣的未來：

使用http（https://angular.io/docs/ts/latest/guide/server-communication.html）來從其他服務器模板的內容。
像How can I use/create dynamic template to compile dynamic Component with Angular 2.0?中推薦的編譯模板。
將動態組件的選擇器寫入模板的應用程序內的某個位置，以便將其包含在其中（例如<dynamic-detail></dynamic-detail>）。

請參見本Plunker例如執行（可清洗和進一步改進）：http://plnkr.co/edit/ZLYGBRl41SlTNoX8xQeD

請記住，這是不打算的Angular2應如何使用的方式，所以在生產中使用這個要小心了。

來源

2017-03-31 14:30:23 metamaker

完全明白你的觀點並且不能同意更多的要求，明顯違反使用角度應用程序的意圖。我可以設法將解決方案部署在具有不同虛擬目錄的同一臺服務器上（這可以消除CORS問題）。但它仍然涉及到http調用.. :( –

我們也有我的實際工作中的應用程序體系結構，包括從API服務器提供angular2表單的模板，所以這是工作的解決方案。對於angular4組件編譯方式NgComponentOutlet存在（https ：//angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html） – metamaker

我已經很難從角度2RC4（是啊，它是一個陷阱）升級到2.4 ..希望4.0不會讓我感到困擾。在其他方面，我會看你提供的樣品（很高興聽到我不是唯一有這個用例的人）。我今天已經筋疲力盡，試圖找到解決辦法。 –

Angular 2與CLI - 來自不同服務器的組件模板

回答

相關問題