Ich habe eine Komponente in Angular 2 namens my-comp:
<my-comp></my-comp>
Wie formatiert man das Host-Element dieser Komponente in Angular 2?
In Polymer würden Sie den Selektor ": host" verwenden. Ich habe es in Angular 2 versucht. Aber es funktioniert nicht.
:host {
display: block;
width: 100%;
height: 100%;
}
Ich habe auch versucht, die Komponente als Selektor zu verwenden:
my-comp {
display: block;
width: 100%;
height: 100%;
}
Beide Ansätze scheinen nicht zu funktionieren.
Vielen Dank.
css
angular
css-selectors
angular-components
Ravi Teja Gudapati
quelle
quelle
my-selector { color : red}
in meinem CSS eingestellt und es funktioniert gut.Antworten:
Es gab einen Fehler, der jedoch in der Zwischenzeit behoben wurde.
:host { }
funktioniert jetzt gut.Ebenfalls unterstützt werden
:host(selector) { ... }
umselector
Attribute, Klassen, ... auf dem Host-Element abzugleichen:host-context(selector) { ... }
fürselector
die Zuordnung von Elementen, Klassen usw. zu übergeordneten Komponentenselector /deep/ selector
(Aliasselector >>> selector
funktioniert nicht mit SASS) für Stile, die über Elementgrenzen hinweg übereinstimmenUPDATE: SASS ist veraltet
/deep/
.Angular (TS und Dart) wurde
::ng-deep
als Ersatz hinzugefügt , der auch mit SASS kompatibel ist.UPDATE2:
::slotted
::slotted
wird jetzt von allen neuen Browsern unterstützt und kann mit `ViewEncapsulation.ShadowDomhttps://developer.mozilla.org/en-US/docs/Web/CSS/::slotted verwendet werden
Siehe auch Externen CSS-Stil in Angular 2 Component laden
/deep/
und>>>
sind nicht von denselben Auswahlkombinatoren betroffen wie in Chrome, die veraltet sind.Angular emuliert (schreibt) sie neu und hängt daher nicht von Browsern ab, die sie unterstützen.
Dies ist auch der Grund
/deep/
und>>>
funktioniert nicht,ViewEncapsulation.Native
was natives Schatten-DOM aktiviert und von der Browserunterstützung abhängt.quelle
@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}
ViewEncapsularion.Emulated
(Standard), aber nicht mitNative
.:host { p { font-size: 80%; } }
in einer ... component.css-Datei arbeiten. Sobald ich versuche es damit zu benutzenstyles: [:host { p { font-size: 80%; } }]
funktioniert es nicht mehr. Sehr eigenartig.Ich habe eine Lösung gefunden, wie man nur das Komponentenelement formatiert. Ich habe keine Dokumentation gefunden, wie es funktioniert, aber Sie können Attributwerte in die Komponentenanweisung unter der Eigenschaft 'host' wie folgt einfügen:
UPDATE: Wie Günter Zöchbauer erwähnte, gab es einen Fehler, und jetzt können Sie das Host-Element auch in einer CSS-Datei wie folgt formatieren:
quelle
!important
zum Überschreiben gezwungen wird ). Es muss eine bessere Wartezeit geben: \host{}
in einerstylesUrl
Datei funktioniert nicht. Bedürfnisse:host
.@HostBinding('style.background-color') private color = 'lime';
Google findet viele Beispiele und Artikel.Überprüfen Sie dieses Problem . Ich denke, der Fehler wird behoben, wenn eine neue Logik zur Vorkompilierung von Vorlagen implementiert wird. Im Moment denke ich, das Beste, was Sie tun können, ist, Ihre Vorlage darin zu verpacken und Folgendes zu
<div class="root">
gestaltendiv
:Sehen Sie diesen Plunker
quelle
In Ihrer Komponente können Sie Ihrem Host-Element .class hinzufügen, wenn Sie einige allgemeine Stile haben möchten, die Sie anwenden möchten.
quelle
Für alle, die untergeordnete Elemente eines
:host
hier stylen möchten, ist ein Beispiel für die Verwendung::ng-deep
:host::ng-deep <child element>
z.B
:host::ng-deep span { color: red; }
Wie andere sagten,
/deep/
ist veraltetquelle
Probieren Sie Folgendes aus: host> / deep /:
Fügen Sie der Datei parent.component.less Folgendes hinzu
Ersetzen Sie die App-Child-Komponente durch Ihren Child-Selektor
quelle