随着互联网的更新，我想到了一个解决方案。

首先是一些警告。

还是不要这么做。澄清一下，我不打算让子组件允许您对它们进行样式设置。SOC。如果你作为组件设计者想要允许这一点，那么你就拥有了更多的权力。 如果你的孩子没有生活在阴影中，那么这对你来说就行不通了。 如果你必须支持一个浏览器，不能有一个影子dom，那么这也不会为你工作。

首先，将子组件的封装标记为shadow，以便它在实际的shadow dom中呈现。其次，将part属性添加到希望允许父元素设置样式的元素中。在父组件样式表中，可以使用::part()方法进行访问

这对我来说很有效

在父组件中:

<child-component [styles]="{width: '160px', borderRadius: '16px'}" >
</child-component>

You should not write CSS rules for a child component elements in a parent component, since an Angular component is a self-contained entity which should explicitly declare what is available for the outside world. If child layout changes in the future, your styles for that child component elements scattered across other components' SCSS files could easily break, thus making your styling very fragile. That's what ViewEncapsulation is for in the case of CSS. Otherwise, it would be the same if you could assign values to private fields of some class from any other class in Object Oriented Programming.

因此，您应该做的是定义一组可以应用于子宿主元素的类，并实现子宿主如何响应它们。

技术上可以这样做:

// child.component.html:
<span class="label-1"></span>

// child.component.scss:
:host.child-color-black {
    .label-1 {
        color: black;
    }
}

:host.child-color-blue {
    .label-1 {
        color: blue ;
    }
}

// parent.component.html:
<child class="child-color-black"></child>
<child class="child-color-blue"></child>

换句话说，你使用Angular +一组CSS类提供的:host伪选择器在子组件本身定义可能的子样式。然后，通过将预定义的类应用到<child>宿主元素，就可以从外部触发这些样式。

简单的回答是，你根本不应该这么做。它破坏了组件封装，破坏了从自包含组件中获得的好处。考虑将道具标志传递给子组件，然后它可以自行决定如何以不同的方式呈现或应用不同的CSS，如果需要的话。

<parent>
  <child [foo]="bar"></child>
</parent>

Angular不赞成所有影响父样式的子样式的方法。

https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

你不应该使用::ng-deep，它已被弃用。在Angular中，从父组件中改变子组件样式的正确方法是使用封装(阅读下面的警告以了解其含义):

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

然后，你就可以修改组件的css，而不需要使用::ng-deep

.mat-sort-header-container {
  display: flex;
  justify-content: center;
}

警告:这样做将使您为该组件编写的所有css规则都是全局的。

为了将你的css的范围限制在这个组件和他的子组件上，在你的组件的顶部标签上添加一个css类，并把你的css“放在”这个标签里:

模板:

<div class='my-component'>
  <child-component class="first">First</child>
</div>,

Scss文件:

.my-component {
  // All your css goes in there in order not to be global
}

如果您希望更针对实际的子组件，则应该执行以下操作。这样，如果其他子组件共享相同的类名，它们也不会受到影响。

砰砰作响: https://plnkr.co/edit/ooBRp3ROk6fbWPuToytO?p=preview

例如:

import {Component, NgModule } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>I'm the host parent</h2>
      <child-component class="target1"></child-component><br/>
      <child-component class="target2"></child-component><br/>
      <child-component class="target3"></child-component><br/>
      <child-component class="target4"></child-component><br/>
      <child-component></child-component><br/>
    </div>
  `,
  styles: [`

  /deep/ child-component.target1 .child-box {
      color: red !important; 
      border: 10px solid red !important;
  }  

  /deep/ child-component.target2 .child-box {
      color: purple !important; 
      border: 10px solid purple !important;
  }  

  /deep/ child-component.target3 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this won't work because the target component is spelled incorrectly */
  /deep/ xxxxchild-component.target4 .child-box {
      color: orange !important; 
      border: 10px solid orange !important;
  }  

  /* this will affect any component that has a class name called .child-box */
  /deep/ .child-box {
      color: blue !important; 
      border: 10px solid blue !important;
  }  


  `]
})
export class App {
}

@Component({
  selector: 'child-component',
  template: `
    <div class="child-box">
      Child: This is some text in a box
    </div>
  `,
  styles: [`
    .child-box {
      color: green;    
      border: 1px solid green;
    }
  `]
})
export class ChildComponent {
}


@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, ChildComponent ],
  bootstrap: [ App ]
})
export class AppModule {}

希望这能有所帮助!

codematrix