Ich folge diesem Tutorial zur Einbettung Ссылка
Allerdings wird nicht erwähnt, wie man Elemente stylt, die ng-content ersetzen.
Es scheint, dass ich dieses Element nur in der CSS-Datei ansprechen kann, wenn das Schlüsselwort /deep/ vorangestellt ist, das normalerweise beim Targeting einer verschachtelten Komponente verwendet wird. Ist das richtig?
::content xxx { ... } funktioniert möglicherweise genauso gut oder :host xxx { ... } . Das Shimmen ist nicht sehr streng oder genau. AFAIK >>> /deep/ und ein Leerzeichen machen das selbe.
Der Inhalt in <ng-content> ist von der Komponente isoliert. Es kann die Attribute oder das Styling der Komponente nicht sehen.
Wenn Sie es stylen müssen, und manchmal werden Sie das tun, haben Sie zwei Möglichkeiten:
Sie können eine reguläre CSS-Datei erstellen und den Inhalt so formatieren. Sie verwenden fast sicher das Schatten-DOM-Polyfill. Reguläres CSS wird das Polyfill durchsehen und das Element einfach stylen. Angenommen, Sie haben eine App-Sidebar. Sie könnten schreiben:
%Vor%Wenn Sie ng-cli verwenden, sind alle Regeln, die Sie in style.scss schreiben, global.
Wenn Sie den Schatten-DOM-Polyfill verwenden und Ihre Komponenten mit dem style oder styleUrls -Attribut des Component Dekorators stylen möchten, wählen Sie das Element mit :host und ignorieren dann den Schatten-DOM-Polyfill mit dem /deep/ untergeordnete Auswahl.
:host wählt das Element aus. /deep/ wählt Elemente aus, ohne den Auswahlditor für Schein-DOM-Attribute den verschachtelten Selektoren hinzuzufügen. Fügen Sie sie zusammen und Sie können alle Elemente auswählen, die innerhalb des Host-Komponentenelements verschachtelt sind, unabhängig davon, wo sie deklariert sind.
wie folgt:
%Vor%Tags und Links angular