如何在Angular 5中从父组件继承子组件中的css样式

Question

我有一个父组件，里面有一个子组件。父组件有一些 css 类，子组件在其中扩展它们。我尝试使用 :host 查看文档，但似乎无法正常工作。

子组件：

<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
    <div class="body-content-inner-wrapper">
        <div class="body-content">
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
            <div>This is the scrollable content whose height is unknown</div>
        </div>
    </div>
</div>

父组件：

         <div class="table container">
                 <div class="table-row header">
                        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
                        <div id="demo" class="collapse">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </div>
                  </div>
            <app-child-component></app-child-component>
                </div>

父组件css：

  :host  .table {
    display: table;
  }

  :host .table-row {
    display: table-row;
  }

  :host .table-cell {
    display: table-cell;
  }

  :host .container {
   width: 400px;
   height: 100vh;
  }

  :host  .header {
    background: cyan;
 }

   :host .body {
    background: yellow;
    height: 100%;
 }

  :host .body-content-outer-wrapper {
    height: 100%;
 }

 .body-content-inner-wrapper {
    height: 100%;
   position: relative;
   overflow: auto;
}

 .body-content {
    position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

即使我将 css 类放在子组件中，布局也会因为有子组件模板而中断。那么主要的问题是子组件从父组件继承扩展 css 的正确方法是什么？

Answer 1

为什么要把事情复杂化？

理想的做法是在子组件中添加父 css 文件的引用。

 @Component({
    selector: 'child-app',
    templateUrl: `./child.component.html`,
    styleUrls:['./parent/parent.component.css', './child.component.css']
})
export class ChildComponent { }

Answer 2

使用::ng-deep，样式将应用于当前组件，但也会向下渗透到组件树中当前组件的子组件。

例子：

:host ::ng-deep app-child-component {
       color:yellow;
     }

一个很好的资源 - Styles Between Components in Angular 2+

Answer 3

另一种替代 ::ng-deep 并引用父 css 文件的方法是使用 encapsulation 组件属性：

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

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  encapsulation: ViewEncapsulation.None
})

父级 css 流向所有子级。