带有CLI的Angular 2 - 来自不同服务器的组件模板

Question

我有一个特定的用例，组件的html模板可以从多个地方加载。

例如，

@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')],
})

需要帮助了解我该如何解决这个问题或者我的替代方案。

由于

Answer 1

您不能为不指向本地路径的组件提供模板URL，也不能require不能从本地路径提供模板URL，但您仍然可以通过从模板内容动态创建组件来实现您想要的目标。 / p>

作为缺点，您必须始终依赖Angular JIT编译器而不是AoT编译器（请参阅此处https://angular.io/docs/ts/latest/cookbook/aot-compiler.html）。您还需要在服务器上启用CORS请求。

你可以做下一个你想做的事情：

1. 使用http（https://angular.io/docs/ts/latest/guide/server-communication.html）从其他服务器获取模板内容。
2. 在How can I use/create dynamic template to compile dynamic Component with Angular 2.0?中推荐编译模板。
3. 将动态组件的选择器写入模板中应用程序的某个位置，以便包含它（例如<dynamic-detail></dynamic-detail>）。

请参阅此Plunker示例实现（可以进一步清理和改进）：http://plnkr.co/edit/ZLYGBRl41SlTNoX8xQeD

请记住，这不是应该如何使用Angular2的方式，因此请注意在生产中使用它。