Winkel 2: Wie wird das Host-Element der Komponente formatiert?

188

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.

Ravi Teja Gudapati
quelle
2
Sind Sie sicher, dass der Stil nicht angewendet wird? Ich habe ein Basisprojekt gemacht und genau das getan und es hat funktioniert. Ich habe my-selector { color : red}in meinem CSS eingestellt und es funktioniert gut.
Pacane
1
Ab Beta 7 funktioniert der Host-Selektor für mich.
Jon Swanson

Antworten:

284

Es gab einen Fehler, der jedoch in der Zwischenzeit behoben wurde. :host { }funktioniert jetzt gut.

Ebenfalls unterstützt werden

  • :host(selector) { ... }um selectorAttribute, Klassen, ... auf dem Host-Element abzugleichen
  • :host-context(selector) { ... }für selectordie Zuordnung von Elementen, Klassen usw. zu übergeordneten Komponenten

  • selector /deep/ selector(Alias selector >>> selectorfunktioniert nicht mit SASS) für Stile, die über Elementgrenzen hinweg übereinstimmen

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.Nativewas natives Schatten-DOM aktiviert und von der Browserunterstützung abhängt.

Günter Zöchbauer
quelle
@Component({selector: 'some-selector', template: 'xxx', styles: [':host { display: block; background-color: green; border: solid 1px red; }']}) export class SomeClass {}
Günter Zöchbauer
@ OndraŽižka kannst du mehr ausarbeiten? Dies ist reines CSS. Wie kann es mit CSS und sich selbst inkonsistent sein?
Günter Zöchbauer
Sofern ich keine wichtige Änderung in CSS verpasst habe, sind / deep / und >>> keine CSS.
Ondra Žižka
Sie sind veraltet, aber das spielt keine Rolle. Sie werden von Angular emuliert (neu geschrieben), daher funktionieren sie nur mit ViewEncapsularion.Emulated(Standard), aber nicht mit Native.
Günter Zöchbauer
In Angular 2.4.7 kann ich :host { p { font-size: 80%; } }in einer ... component.css-Datei arbeiten. Sobald ich versuche es damit zu benutzen styles: [:host { p { font-size: 80%; } }]funktioniert es nicht mehr. Sehr eigenartig.
Martin
39

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:

@Component({
    ...
    styles: [`
      :host {
        'style': 'display: table; height: 100%',
        'class': 'myClass'
      }`
})
export class MyComponent
{
    constructor() {}

    // Also you can use @HostBinding decorator
    @HostBinding('style.background-color') public color: string = 'lime';
    @HostBinding('class.highlighted') public highlighted: boolean = true;
}

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:

:host{ ... }
prespic
quelle
1
Ich mag das besser als das Erstellen eines Dummy-.root-Elements, aber ich mag es nicht, dass diese Stile als Inline festgelegt werden (wodurch a !importantzum Überschreiben gezwungen wird ). Es muss eine bessere Wartezeit geben: \
Scrimothy
4
Nein, das Styling über host{}in einer stylesUrlDatei funktioniert nicht. Bedürfnisse :host.
Phil294
Wie können wir auf Komponentenvariablen innerhalb des Hosts zugreifen? Wenn ich die Hintergrundfarbe dynamisch bestimmen möchte? ': host {Hintergrundfarbe: this.bgColor; } '
Pratap AK
@ PratapA.K Hallo, Sie können den HostBinding-Derorator verwenden. Ihr Beispiel lautet: @HostBinding('style.background-color') private color = 'lime'; Google findet viele Beispiele und Artikel.
Prespic
11

Ü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">gestalten div:

@Component({ ... })
@View({
  template: `
    <div class="root">
      <h2>Hello Angular2!</h2>
      <p>here is your template</p>
    </div>
  `,
  styles: [`
    .root {
      background: blue;
    }
  `],
   ...
})
class SomeComponent {}

Sehen Sie diesen Plunker

Alexpods
quelle
9

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.

export class MyComponent{
     @HostBinding('class') classes = 'classA classB';
Xquick
quelle
6

Für alle, die untergeordnete Elemente eines :hosthier 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 veraltet

Petros Kyriakou
quelle
4

Probieren Sie Folgendes aus: host> / deep /:

Fügen Sie der Datei parent.component.less Folgendes hinzu

:host {
    /deep/ app-child-component {
       //your child style
    }
}

Ersetzen Sie die App-Child-Komponente durch Ihren Child-Selektor

abahet
quelle
Was ist, wenn Sie ein Stylesheet wie Bootstrap anstelle eines einzelnen Stils verwenden möchten?
Aditya Vikas Devarapalli