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

Question

想象一下我有一个包装器组件：

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

路由器出口注入以下组件之一：

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

我希望app-page1，app-page2和app-page3具有某些特殊样式，但是仅当位于app-my-wrapper内时。

我通常会这样做：

my-wrapper.component.scss

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

根据angular.io，/deep/，>>>和::ng-deep弃用。

根据父组件为子组件提供一些额外样式的正确方法是什么？