如何在角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是不可取的。

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

Answer 1

可以禁用当前组件的视图封装：

只需在组件装饰器中添加encapsulation: ViewEncapsulation.None即可。

有关更多详细信息，请参阅https://angular.io/api/core/ViewEncapsulation。