Angular 6 中的新特性：无需样式表程序化 CSS
随着网页设计日新月异的发展，前端开发人员经常接触到各种各样的样式表和 CSS 框架。虽然这些工具在优化和简化样式表的编写方面都做得相当不错，但如果我们能够直接在 Angular 组件中定义 CSS 样式，那么将大大提高开发效率，并带来更加灵活和可扩展的代码结构。幸运的是，Angular 6 中引入了一项新的特性：无需样式表程序化 CSS。
介绍
传统方式下，我们需要在每个组件中引入其专属的样式表，这不仅增加了代码分散度，而且增大了重构成本。事实上，实践中很多组件只需要几个简单的样式定义。
Angular 6 程序化 CSS 特性的引入，使我们可以通过将 CSS 样式直接嵌入到组件模板中来消除这些问题。
以下是一个简单的示例：
<div class="card" [ngStyle]="{ backgroundColor: 'white', padding: '10px' }">
<h1 [ngStyle]="{ color: 'red' }">Hello Angular 6!</h1>
<p [ngStyle]="{ fontSize: '18px', fontFamily: 'Helvetica' }">Welcome to the world of programmatic CSS!</p>
</div>这个程序化 CSS 特性就位于 ngStyle 内，也就是说我们可以直接将样式规则定义在组件模板中，而不必将它们存储在单独的 CSS 文件中。
深入
程序化 CSS 特性与其他 Angular 组件结构一样，依赖于组件的类。我们可以通过将样式作为组件的属性传递给组件类的属性来定义程序化样式：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
---- ------------ ----------------------
--- ---------------------------- ------- -------
-- -------------------------------- -- --- ----- -- ------------ --------
------
--
--
------ ----- ------------- -
--------- - -
---------------- --------
-------- -------
--
---------- - -
------ ------
--
------------ - -
--------- -------
----------- ------------
--
-在这个示例中，我们定义了三个样式对象，分别对应于组件中中的不同元素。这三个对象分别包含要应用于相应元素的 CSS 属性。
接下来，我们传递这些对象到组件的模板中，并将它们绑定到 ngStyle 服务中。
指导
程序化 CSS 可以使我们更方便地定义我们的组件的样式。它在简化 CSS 文件的同时创造了更加灵活和可扩展的代码结构。在使用程序化 CSS 之前，需要注意以下几点：
- 某些 CSS 属性只能在独立的 CSS 文件中定义，比如 @import。
- 它并不适用于大型和高度可配置的应用程序。
- 一般情况下，应该尝试在使用程序化 CSS 之前将其作为内联样式写入组件模板，因为这样可以使组件更具可组合性和可读性。
结论
Angular 6 中的程序化 CSS 特性可以让开发者方便地定义组件的样式，极大地简化了样式表的编写流程。通过这个特性，我们可以更灵活地处理与 CSS 有关的具体问题，同时保持代码结构清晰、可读性高。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671da3d49babaf620fb75774