面试题：Angular组件样式封装的基本方式

Question

在Angular中，组件样式封装有哪些常见的方式？请简要说明每种方式的特点及适用场景。

Answer 1

组件样式封装方式

1. 内联样式（Inline Styles）
   • 特点：样式直接写在组件的 styles 数组中，与组件代码紧密结合。代码简洁直观，易于调试，修改组件样式时无需在多个文件间切换。但对于复杂样式，会使组件代码变得冗长，不利于样式的复用。
   • 适用场景：适用于一些简单、只在当前组件使用且样式规则较少的情况，例如一个小的提示框组件等。
2. 外部样式表（External Style Sheets）
   • 特点：将样式写在单独的CSS文件中，通过 styleUrls 数组引入到组件中。这种方式使样式和组件逻辑分离，代码结构清晰，便于维护和复用。同时，也方便团队协作，样式开发者和组件开发者可以分别专注于各自的工作。但如果样式文件过多，可能会增加文件管理的复杂度。
   • 适用场景：适用于大多数组件，尤其是样式较为复杂、需要复用或者需要团队协作开发的场景，比如一个完整的页面组件。
3. 视图封装策略（View Encapsulation Strategies）
   • 特点：Angular提供了三种视图封装策略，分别是 Emulated（默认）、Native 和 None。
     • Emulated：通过添加特殊属性（如 _nghost-xyz）到组件的HTML元素和CSS选择器上，实现样式的封装，使其只作用于当前组件。模拟了Shadow DOM的效果，兼容性好，几乎所有浏览器都支持。但由于添加了属性，可能会影响CSS选择器的优先级和性能。
     • Native：利用浏览器原生的Shadow DOM来封装样式，真正实现了样式的隔离，组件样式不会影响到外部，外部样式也不会影响到组件内部。具有较好的性能和样式隔离效果，但浏览器兼容性有限，部分老旧浏览器不支持。
     • None：不进行任何样式封装，组件的样式会影响到全局，全局样式也会影响到组件。这种方式失去了组件样式封装的意义，但在一些特殊情况下，比如需要快速开发原型或者对全局样式有特殊需求时可能会用到。
   • 适用场景：
     • Emulated：适用于大多数需要样式封装且对浏览器兼容性要求较高的场景。
     • Native：适用于对现代浏览器兼容性有把握，且追求更好的样式隔离和性能的项目。
     • None：适用于开发原型、一些特殊的全局样式需求场景，不建议在正式生产环境中大量使用。