CSS-Verhalten von Komponenten in Angular2

Question

Ich öffne diesen Beitrag, weil ich Zweifel bezüglich CSS Angular2 Components habe.

Grundsätzlich habe ich eine Vorlage gekauft und übergebe sie an Komponenten in Angular2. In der ursprünglichen Vorlage bleibt der Header hängen, wenn man die Seite herunterscrollt, und dieses Verhalten wird mit einer Bibliothek namens Sticky-kit.js gemacht, die eine "is_stuck" -Klasse zum html-Tag hinzufügt, in diesem Fall das Header-Tag, wenn Scrollen erkannt wird . In der Vorlage befindet sich das html-Header-Tag innerhalb eines div mit "main-wrapper" -Klasse, die nur eine Breite von 100% hat. Alles funktioniert gut in Originalvorlage.

Wenn ich den Header an eine Komponente übergeben und die Anwendung ausführen, funktioniert die Bibliothek sticky-kit.js gut, weil die entsprechende "is_stuck" -Klasse hinzugefügt wird, aber trotz der Klasse bleibt der Header nicht stecken. Die Bibliothek sucht nach einer Klasse ".topbar" in html, wenn sie das entsprechende Element findet, bildet sie die Klasse "is_stuck".

Ich versuche herauszufinden, warum das passiert.

Ich habe einige Tests, einer von ihnen wurden den Header-Code außerhalb der Komponente (Sohn von "Haupt-Wrapper" div) als die ursprüngliche Vorlage Struktur und es funktioniert gut, aber, wenn ich den Code zurück in die Komponente funktioniert es nicht mehr. In der ursprünglichen Vorlage lautet die übergeordnete Kopfzeile des Headers:

<div class="main-wrapper"></div> 

aber in eckigen Struktur der Elternteil des Headers ist die Komponente selbst.

Das ist die Struktur, die ich Umsetzung bin:

<div id="main-wrapper"> 
    <app-header></app-header> 
    <app-menu></app-menu> 
    <div class="page-wrapper">...</div> 
</div> 

und ich kann den Header wie folgt stecken bleiben:

<div id="main-wrapper"> 
    <header>code here</header> <---------- 
    <app-menu></app-menu> 
    <div class="page-wrapper">...</div> 
</div> 

ich, dass dieses Verhalten, da die Komponente passiert, denke Verkapselung und ich Ich möchte den Header-Code nicht außerhalb der Header-Komponente platzieren.

Würde jemand helfen?

Danke!

Answer 1

Ok Leute, ich habe die Antwort auf meine Frage gefunden. Nachdem ich stundenlang versucht habe, das Problem zu lösen.

Das einzige, was ich tun musste, ist die Host-Metadaten der Komponente in Header Eltern verwenden und wenden Sie eine CSS-Regel mit: Host in der Header-Komponente.

Es ist beeindruckend, wie ein kleines Problem dauert Stunden zu lösen.

Danke an alle, die meine Frage gelesen haben.