External and global style files

Question

在我的 app.component.html 中，我进行了以下工作类分配。

<body>
  <span class="test">SHABOO</span>
  <div class="container">
    <router-outlet></router-outlet>
  </div>
</body>

在出口中，将渲染一个组件，其中包含以下内容。

<span class="test">HAZAA</span>

我希望它具有与第一个相同的样式，但似乎该样式并未层叠到组件上。这让我不确定是否误解了Angular的父子组件之间样式应该如何表现。

我确保不重写类的名称（以排除发生冲突的风险）。目前，我在每个组件中都放置了类似的SCSS代码块，这显然是不好的做法。

如果我@import "../app.component.scss"，样式就会加入。但是我的印象是，即使没有导入，样式也应该是层叠的。

Answer 1

角组件使用view encapsulation。这是设计使然，因此组件可在应用程序之间重用。要将组件的样式视为 global ，请将视图封装模式设置为none（不推荐）。代替使用none，在全局styles.css文件中预先配置的Angular CLI styles section中注册全局样式文件。

组件CSS样式封装在组件的视图中，不会影响应用程序的其余部分。

要控制这种封装如何在每个组件的基础上发生，您可以在组件元数据中设置视图封装模式。从以下模式中选择：



ShadowDom视图封装使用浏览器的本机影子DOM实现（请参见Shadow DOM网站上的MDN）将影子DOM附加到组件的host元素，然后放入影子DOM中的组件视图。组件的样式包含在阴影DOM中。



Native视图封装使用浏览器的本机影子DOM实现的现已弃用版本-learn about the changes。



Emulated视图封装（默认）通过对CSS代码进行预处理（并重命名）以有效地将CSS限制在组件视图中，从而模拟了影子DOM的行为。有关详细信息，请参见Appendix 1。



None表示Angular不进行视图封装。 Angular将CSS添加到全局样式中。先前讨论的范围规则，隔离和保护不适用。这基本上与将组件的样式粘贴到HTML中相同。



要设置组件封装模式，请使用组件元数据中的encapsulation属性：

src / app / quest-summary.component.ts

// warning: few browsers support shadow DOM encapsulation at this time
encapsulation: ViewEncapsulation.Native

ShadowDom视图封装仅在对影子DOM具有本地支持的浏览器上有效（请参见Shadow DOM v1网站上的Can I use）。支持仍然有限，这就是为什么 Emulated视图封装是默认模式，在大多数情况下建议使用 的原因。

External and global style files

使用CLI进行构建时，必须配置angular.json以包括所有外部资产，包括外部样式文件。

在样式部分中注册全局文件，默认情况下，该文件已预先配置了全局styles.css文件。

请参阅CLI wiki了解更多信息。

Answer 2

这是角度工作的方式。每个组件都是用CSS分隔的，即使它是父组件的子组件也是如此。他们无法继承其父CSS。

Haza Span组件是您的应用程序组件的子组件，但它是独立的组件。因此，您无法将Shaboo的样式应用于Haza。

解决方案：

如果您要维护相同的CSS，则有多种方法。

推荐方式：

a）如果仅用于单个类，则将该类复制到子组件。

b）如果用于大量类，请为它们创建一个CSS文件，并将它们导入父级和子级组件CSS中。示例：

@import'../ span.css';
您可以将此CSS添加到styles.css。那么您将在应用程序中的任何位置获取它。如果您想在很多地方使用这种风格，可以做到。
如@Christopher Peisert所述，通过使用

封装：ViewEncapsulation.Native child.component.ts中@component装饰器的末尾。不推荐的方式

Answer 3

全局CSS文件是angular.json中列出的文件。

默认情况下，所有其他CSS文件都被封装（可以删除，但不建议这样做。）

随着应用程序的增长，保持全局CSS的组织很重要。我想做的是创建一个全局样式文件夹，然后为可能正在更改的不同小部件添加新文件。由于删除:: ng-deep，这些类型的更改必须在全局范围内完成。

Answer 4

它像那样工作。如果您需要通用样式，请将其添加到全局styles.scss文件中。

Answer 5

如果要使用全局样式，请将其放入全局文件styles.css或样式中。[您的CSS预处理器]

请参见以下示例https://stackblitz.com/edit/angular-a5ntm6?file=src%2Fstyles.css

我把测试课放在最后

.test{
  color:red;
}

角度：组件样式是否不级联到子组件？

5 个答案:

src / app / quest-summary.component.ts

External and global style files