我发现如果你可以访问子组件代码，传递@INPUT变量会更简洁:

这个想法是，父进程告诉子进程它的外观状态应该是什么，而子进程决定如何显示这个状态。这是一个很好的建筑

SCSS道:

.active {
  ::ng-deep md-list-item {
    background-color: #eee;
  }
}

更好的方法:-使用选定的变量:

<md-list>
    <a
            *ngFor="let convo of conversations"
            routerLink="/conversations/{{convo.id}}/messages"
            #rla="routerLinkActive"
            routerLinkActive="active">
        <app-conversation
                [selected]="rla.isActive"
                [convo]="convo"></app-conversation>
    </a>
</md-list>

你不应该使用::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
}

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

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

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

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

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>宿主元素，就可以从外部触发这些样式。

我希望通过以下方式实现这一目标:

使用@Component将css类添加到宿主元素，并将封装设置为none。然后在组件style.css.scss中引用添加到宿主的类，这将允许我们声明只影响我们自己和我们类范围内的子类的样式。初版

@Component({
  selector: 'my-component',
  templateUrl: './my-component.page.html',
  styleUrls: ['./my-component.page.scss'],
  host: {
    class: 'my-component-class'
  },
  encapsulation: ViewEncapsulation.None
})

结合下面的CSS (my-component.page.scss)

// refer ourselves so we are allowed to overwrite children but not global styles
.my-component-class {
  // will effect direct h1 nodes within template and all h1 elements within child components of the 
  h1 {
    color: red;
  }
}
// without class "scope" will affect all h1 elements globally
h1 {
  color: blue;
}

要在子组件中为元素的类赋值，可以在子组件中使用@Input字符串，并将其用作模板中的表达式。下面是我们在共享Bootstrap加载按钮组件中更改图标和按钮类型的示例，而不影响它在整个代码库中的使用方式:

app-loading-button.component.html(孩子)

<button class="btn {{additionalClasses}}">...</button>

app-loading-button.component.ts

@Input() additionalClasses: string;

parent.html

<app-loading-button additionalClasses="fa fa-download btn-secondary">...</app-loading-button>