Angular 2：内联样式和模板（a la Reactjs）与外部？答案

【问题标题】：Angular 2: Inline styles & templates (a la Reactjs) vs externals?Angular 2：内联样式和模板（a la Reactjs）与外部？
【发布时间】：2016-06-03 02:26:55
【问题描述】：

我一直在研究新 Angular 2 组件中的内联样式和模板与外部组件。

我想知道推荐的路线是什么。我知道就功能而言，这并不重要。

在组件中同时包含样式和模板让我想起了 reactjs 是如何处理事情的。它确实有它的优势。

代码完成等？这对于内联和外联更好吗？我不确定要走哪条路线或推荐哪条路线。

【问题讨论】：

我认为答案取决于一个人的观点和您的要求。

标签： angularjs angular angular2-template

【解决方案1】：

我认为这是关于组件的封装和唯一性。有时您会遇到某些元素需要一些特殊样式的情况。使用传统的 css，您将创建一个独特的类，有时使用 !important 来确保它适用....

使用 ng 组件，您的组件可以共享全局样式，同时拥有自己独特的样式。此外，组件的样式可以包含在自身内部和/或全局共享，让您可以更灵活地做自己想做的事情。

https://egghead.io/lessons/angular-2-controlling-how-styles-are-shared-with-view-encapsulation?series=angular-2-fundamentals

【讨论】：

【解决方案2】：

来自https://angular.io/styleguide

将模板和样式提取到自己的文件中

样式 05-04

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

请将模板文件命名为 [component-name].component.html，其中 [component-name] 是我们的组件名称。

请将样式文件命名为 [component-name].component.css，其中 [component-name] 是我们的组件名称。

为什么？（.js 和 .ts）代码文件中的内联模板的语法提示是部分编辑器不支持。

为什么？组件文件的逻辑在不与内联模板和样式。

【讨论】：