问为什么在子组件中将封装设置为none会影响父组件样式？

EN

将ViewEncapsulation设置为none将导致样式在其他模块和组件之间传播，因此，如果只希望它们在模块或父/子组件中应用，则可能不适合。

如果希望只为该组件及其“嵌套”子组件应用css，则可以尝试定义共享CSS，该共享css将在主组件和子组件之间共享。不要将ViewEncapsulation设置为None。这就是如何构造该模块中的文件。

|--parent
   |--shared
      |-- shared.css
   |--components
      |--child
         |--child.component.ts
         |--child.component.css
   |--parent.module.ts
   |--parent.component.ts
   |--parent.component.html
   |--parent.component.css

然后，在靠近父组件和子组件顶部的@Component类型装饰器上，可以包含所需css文件的相对/绝对路径。正如您所看到的，shared.css包含在两个组件中，并且样式将仅封装到这些组件中。

child.component.ts：

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css', '../../shared/shared.css'],
})

在你的parent.component.ts上，

@Component({
  selector: '',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css', './shared/shared.css'],
})

因为它们成为你的应用程序的全球样式。根据您如何在将其encapsulation更改为ViewEncapsulation.None的组件中指定CSS选择器和类，它们将应用于应用程序中的所有组件。

这对我来说是个非常令人困惑的话题。默认的ViewEncapsulation.Emulated表示它将是子对象的父级。不过，在其中一个子组件中，我在css文件中覆盖..mat表单字段标签(它的父声明位于全局styles.scss in angular.json中)，但它不起作用。它不会被覆盖。

只有当我在css覆盖或：：ng-深处使用ViewEncapsulation.None时，它才能工作。但是这两个应用程序适用于整个应用程序，对吗？不知怎么的，我甚至认为他们有一个窃听器。