Question

在Angular 2中，我们可以对模板和样式使用内联或url方法。使用url有利于模块化，可读性和IDE也提供代码帮助。使用url会导致浏览器发出额外请求，这可能会导致性能下降。使用模板和样式的推荐方法是什么 - 内联或网址？

的示例

template: 'Hello {{name}}'
templateUrl: 'my-component.html'    

styles: ['.primary {color: red}']
styleUrls: ['my-component.css']

Answer 1

很好说

使用url有利于模块化，可读性和IDE也提供代码帮助。使用url会导致浏览器发出额外请求，这可能会导致性能下降

但是根据@mgchev样式指南

，我们的代码需要多长时间

将超过15行代码的更复杂和更大的模板提取到一个单独的文件中，并将它们放在控制器定义旁边。

为什么？：如果在组件元数据中内联大而复杂的模板，它可能会将焦点从控制器中定义的组件逻辑中移开。

但如果我们查看官方风格指南，如果编码超过3行，它会告诉我们使用seprate文件

当超过3行时，将模板和样式提取到单独的文件中。

同样的情况也适用于Css样式，如果我们有复杂的代码，那么更好的是提供外部URL而不是内联。另见：