So erben Sie CSS-Stile in untergeordneten Komponenten von übergeordneten Komponenten in Angular 5

Ich habe eine übergeordnete Komponente, in der ich eine untergeordnete Komponente habe. Die übergeordnete Komponente hat einige CSS-Klassen, die von der untergeordneten Komponente erweitert werden. Ich habe versucht, :host als Blick auf die Dokumentation zu verwenden, aber es scheint nicht richtig zu funktionieren.

untergeordnete Komponente:

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

übergeordnete Komponente:

         <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 der übergeordneten Komponente:

  :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;
}

Das Problem, selbst wenn ich CSS-Klassen in die untergeordnete Komponente einfüge, bricht das Layout zusammen, nur weil es eine untergeordnete Komponentenvorlage gibt. Die Hauptfrage ist also, wie das Kind die erweiterte CSS-Datei von der übergeordneten Komponente erben kann.

Warum die Dinge komplex machen?

Der ideale Weg wäre, die Referenz der übergeordneten CSS-Datei auch in der untergeordneten Komponente hinzuzufügen.

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

Mit ::ng-deepwerden Stile auf die aktuelle Komponente angewendet, aber auch auf die Komponenten übertragen, die der aktuellen Komponente im Komponentenbaum untergeordnet sind.

Beispiel:

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

Eine gute Ressource – Stile zwischen Komponenten in Angular 2+

Eine weitere Alternative zu ::ng-deep und Verweisen auf die CSS-Datei des übergeordneten Elements ist die Verwendung der Verkapselung Komponenteneigenschaft:

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

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

das Eltern-CSS mit Fluss zu allen seinen Kindern.

Warum Sie versuchen, es komplex zu machen, können Sie einfach Ihr übergeordnetes Komponenten-CSS in Ihr cild-Komponenten-CSS importieren