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文件的另一种替代方法是使用封装组件属性：

[ "here", "we", "go" ]

父css可以流到所有子c

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

3 个答案: