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 - 来自不同服务器的组件模板

回答

相关问题