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

Lesezeit: 4 Minuten

Benutzeravatar von AlexFF1
AlexFF1

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

  • mein Fehler, trotzdem danke, habe gerade festgestellt, dass es keine Eltern-Kind-Architektur gibt, sondern 2 Geschwisterkomponenten. Was wäre in diesem Szenario der beste Weg? Soll ich Klassen in globales CSS verschieben?

    – AlexFF1

    27. März 2018 um 15:03 Uhr


  • Wenn beide Geschwister Eltern haben, können Sie wie in meiner Antwort vorgeschlagen vorgehen. Andernfalls können Sie eine freigegebene CSS-Datei haben und in beiden Komponenten unter “StyleUrls” einen Verweis auf freigegebene CSS hinzufügen.

    – Dheeraj Kumar

    27. März 2018 um 15:04 Uhr

  • Wenn ich dies tue, hat jede Komponente einen anderen Bereich, und Stile werden nicht vererbt.

    – AlexFF1

    27. März 2018 um 15:08 Uhr

  • Arbeiten Sie in AngularJS, für Angular2+. Es gibt keine Begrenzung des Umfangs, Sie können gemeinsam genutzte Komponenten und gemeinsam genutztes CSS zwischen mehreren Komponenten haben, indem Sie einfach einen Verweis auf StyleUrls hinzufügen.

    – Dheeraj Kumar

    27. März 2018 um 15:11 Uhr

  • Bei Angular 2+ besteht das Problem darin, dass CSS aufgrund von etwas wie >>

    abbricht. Die Klassentabellenzeile ist vorhanden, aber sie bricht die App. Nur wenn ich die Klasse in den tatsächlichen -Selektor verschiebe, funktioniert es. Aber so brauche ich das nicht.

    – AlexFF1

    27. März 2018 um 15:19 Uhr

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+

  • ng-deep ist veraltet: angle.io/guide/component-styles

    – derpedy-doo

    14. Januar 2020 um 17:58 Uhr

  • Was ist der neue Weg, dies zu tun? Oder wird es nicht mehr unterstützt?

    – Leogout

    27. Januar 2021 um 14:03 Uhr

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.

  • aber es fließt auch in den Rest der Anwendung. Ähnlich wie das Einfügen von login.component.css in die globalen Stile. Außerdem macht es diese Komponenten anfällig dafür, andere Komponenten zu beschädigen.

    – mdarefull

    12. März 2019 um 20:15 Uhr

  • @SoEzPz das stimmt nicht, ich habe es gerade getestet und ich kann eindeutig eine Klassendeklaration in der scss einer untergeordneten Komponente in jedem übergeordneten Element anwenden. ViewEncapsulation.None macht diese Stile global.

    – michelepatrassi

    15. Januar 2021 um 10:59 Uhr

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

1436960cookie-checkSo erben Sie CSS-Stile in untergeordneten Komponenten von übergeordneten Komponenten in Angular 5

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy