web-dev-qa-db-ja.com

Angular 5で親から子コンポーネントのCSSスタイルを継承する方法

親コンポーネントがあり、その中に子コンポーネントがあります。親コンポーネントにはいくつかの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を継承する適切な方法は何ですか？

javascripthtmlcssangularangular5
12
AlexFF1

なぜ物事を複雑にするのですか？

理想的な方法は、子コンポーネントにも親cssファイルの参照を追加することです。

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

::ng-deep、スタイルは現在のコンポーネントに適用されますが、コンポーネントツリーの現在のコンポーネントの子であるコンポーネントまで細流化されます。

例：

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

良いリソース- Angular 2+）のコンポーネント間のスタイル

4
Damien Asseya

:: 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。

2
Chtiwi Malek