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

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.

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

  • UPDATE: SASS ist veraltet /deep/.
    Angular (TS und Dart) wurde ::ng-deepals Ersatz hinzugefügt , der auch mit SASS kompatibel ist.

  • UPDATE2: ::slotted ::slotted wird jetzt von allen neuen Browsern unterstützt und kann mit `ViewEncapsulation.ShadowDom
    https://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.Nativewas natives Schatten-DOM aktiviert und von der Browserunterstützung abhängt.

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

Ü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

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';

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

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