如何在Angular 6中设置嵌套组件的样式？

Question

Imagine I have a wrapper component:

<app-my-wrapper>
   <router-outlet></router-outlet>
</app-my-wrapper>

The router outlet injects one of following components:

<app-page1></app-page1>
<app-page2></app-page2>
<app-page3></app-page3>

I want app-page1 , app-page2 and app-page3 to have some special styles, but only if inside app-my-wrapper .

I'd normally do something like this:

my-wrapper.component.scss

:host ::ng-deep .page {
   /* some styles */
}

According to angular.io , /deep/ , >>> , and ::ng-deep are deprecated.

What would be the proper way of giving the children components some extra styles depending on the parent component?

Answer 1

You can disable view encapsulation for your current component:

Simply add encapsulation: ViewEncapsulation.None in your component decorator.

See https://angular.io/api/core/ViewEncapsulation for more details.