Angolare 2: come definire lo stile dell'elemento host del componente?

Ho un componente in Angular 2 chiamato my-comp:

<my-comp></my-comp>

In che modo uno stile l'elemento host di questo componente in Angular 2?

In Polimero, useresti il ​​selettore ": host". L'ho provato in Angular 2. Ma non funziona.

:host {
  display: block;
  width: 100%;
  height: 100%;
}

Ho anche provato a utilizzare il componente come selettore:

my-comp {
  display: block;
  width: 100%;
  height: 100%;
}

Entrambi gli approcci non sembrano funzionare.

Grazie.

Si è verificato un errore, ma nel frattempo è stato risolto. :host { }funziona bene ora.

Sono supportati anche

• :host(selector) { ... }per selectorabbinare attributi, classi, ... sull'elemento host

• :host-context(selector) { ... }per selectorabbinare elementi, classi, ... sui componenti principali

• selector /deep/ selector(alias selector >>> selectornon funziona con SASS) affinché gli stili corrispondano ai limiti degli elementi

  • AGGIORNAMENTO: SASS sta deprecando /deep/.
    Angolare (TS e Dart) aggiunto ::ng-deepin sostituzione compatibile anche con SASS.

  • UPDATE2: ::slotted ::slotted ora è supportato da tutti i nuovi browser e può essere utilizzato con `ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Vedi anche Carica stile CSS esterno in Angular 2 Component

/deep/e non>>> sono interessati dagli stessi combinatori di selettori che in Chrome sono obsoleti.
Angular li emula (riscrive) e quindi non dipende dai browser che li supportano.

Questo è anche il motivo /deep/e >>>non funziona con ViewEncapsulation.Nativecui abilita il DOM shadow nativo e dipende dal supporto del browser.

Ho trovato una soluzione su come modellare solo l'elemento componente. Non ho trovato alcuna documentazione su come funzioni, ma puoi inserire i valori degli attributi nella direttiva componente, sotto la proprietà 'host' come questa:

@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;
}

AGGIORNAMENTO: Come menzionato da Günter Zöchbauer, c'era un bug e ora puoi modellare l'elemento host anche nel file css, in questo modo:

:host{ ... }

Dai un'occhiata a questo problema . Penso che il bug verrà risolto quando verrà implementata la nuova logica di precompilazione del modello . Per ora penso che il meglio che puoi fare sia avvolgere il tuo modello <div class="root">e modellarlo div:

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

Vedi questo plunker

Nel componente è possibile aggiungere .class all'elemento host se si desidera applicare alcuni stili generali.

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

Per chiunque cerchi di dare uno stile agli elementi figlio di un :hostqui è un esempio di come usare::ng-deep

:host::ng-deep <child element>

per esempio :host::ng-deep span { color: red; }

Come altri hanno detto /deep/è deprecato

Prova il: host> / deep /:

Aggiungi quanto segue al file parent.component.less

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

Sostituisci il componente app-child con il tuo selettore figlio