Angular 2: Comment styliser l'élément hôte du composant?

J'ai un composant dans Angular 2 appelé my-comp:

<my-comp></my-comp>

Comment styliser l'élément hôte de ce composant dans Angular 2?

Dans Polymer, vous utiliseriez le sélecteur ": host". Je l'ai essayé dans Angular 2. Mais cela ne fonctionne pas.

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

J'ai également essayé d'utiliser le composant comme sélecteur:

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

Les deux approches ne semblent pas fonctionner.

Merci.

Il y avait un bug, mais il a été corrigé entre-temps. :host { }fonctionne bien maintenant.

Sont également pris en charge

• :host(selector) { ... }pour selectorfaire correspondre les attributs, les classes, ... sur l'élément hôte

• :host-context(selector) { ... }pour selectorfaire correspondre des éléments, des classes, ... sur des composants parents

• selector /deep/ selector(l'alias selector >>> selectorne fonctionne pas avec SASS) pour que les styles correspondent à travers les limites des éléments

  • MISE À JOUR: SASS est obsolète /deep/.
    Angular (TS et Dart) ajouté ::ng-deepen remplacement qui est également compatible avec SASS.

  • UPDATE2: ::slotted ::slotted est désormais pris en charge par tous les nouveaux navigateurs et peut être utilisé avec `ViewEncapsulation.ShadowDom
    https://developer.mozilla.org/en-US/docs/Web/CSS/::slotted

Voir aussi Charger le style css externe dans le composant Angular 2

/deep/et ne>>> sont pas affectés par les mêmes combinateurs de sélecteurs que dans Chrome qui sont obsolètes.
Angular les émule (les réécrit) et ne dépend donc pas des navigateurs les prenant en charge.

C'est aussi pourquoi /deep/et >>>ne fonctionne pas avec ViewEncapsulation.Nativequi active le DOM shadow natif et dépend de la prise en charge du navigateur.

J'ai trouvé une solution pour styliser uniquement l'élément composant. Je n'ai trouvé aucune documentation sur son fonctionnement, mais vous pouvez mettre des valeurs d'attributs dans la directive de composant, sous la propriété 'host' comme ceci:

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

MISE À JOUR: Comme Günter Zöchbauer l'a mentionné, il y avait un bogue, et maintenant vous pouvez styliser l'élément hôte même dans un fichier css, comme ceci:

:host{ ... }

Consultez ce problème . Je pense que le bogue sera résolu lorsque la nouvelle logique de précompilation du modèle sera implémentée. Pour l'instant, je pense que le mieux que vous puissiez faire est d'envelopper votre modèle <div class="root">et de le styliser div:

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

Voir ce plunker

Dans votre composant, vous pouvez ajouter .class à votre élément hôte si vous souhaitez appliquer certains styles généraux.

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

Pour tous ceux qui cherchent à styliser les éléments enfants d'un, :hostvoici un exemple d'utilisation::ng-deep

:host::ng-deep <child element>

par exemple :host::ng-deep span { color: red; }

Comme d'autres l'ont dit, il /deep/est obsolète

Essayez le: host> / deep /:

Ajoutez ce qui suit au fichier parent.component.less

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

Remplacez le composant app-enfant par votre sélecteur enfant