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


189

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.


2
Êtes-vous sûr que le style n'est pas appliqué? J'ai fait un projet de base et j'ai fait exactement cela et cela a fonctionné. J'ai mis my-selector { color : red}dans mon css et cela fonctionne très bien.
Pacane du

1
Depuis la version beta 7, le sélecteur: host fonctionne pour moi.
Jon Swanson

Réponses:


285

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.


@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 pouvez-vous en dire plus? C'est du pur CSS, comment peut-il être incompatible avec le CSS et lui-même?
Günter Zöchbauer

Sauf si j'ai manqué un changement important dans CSS, / deep / et >>> ne sont pas CSS.
Ondra Žižka

Ils sont obsolètes, mais cela n'a pas d'importance. Ils sont émulés par Angular (réécrit), ils ne fonctionnent donc qu'avec ViewEncapsularion.Emulated(par défaut) mais pas avec Native.
Günter Zöchbauer

Dans Angular 2.4.7, je suis capable :host { p { font-size: 80%; } }de travailler dans un fichier ... component.css. Dès que j'essaye de l'utiliser avec styles: [:host { p { font-size: 80%; } }]ça ne fonctionne plus. Très étrange.
Martin

39

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

1
J'aime mieux cela que de créer un élément factice .root, mais je n'aime pas que cela définisse ces styles comme inline (forçant a !importantà remplacer). Il doit y avoir un meilleur waayy: \
Scrimothy

4
non, le style via host{}dans un stylesUrlfichier ne fonctionne pas. besoins :host.
phil294

comment pouvons-nous accéder à la variable de composant à l'intérieur de l'hôte? Si je veux décider de la couleur d'arrière-plan de manière dynamique? ': host {couleur d'arrière-plan: this.bgColor; } '
Pratap AK

@ PratapA.K Bonjour, vous pouvez utiliser le derorator HostBinding. Votre exemple sera: @HostBinding('style.background-color') private color = 'lime'; Google vous trouvera de nombreux exemples et articles.
prespic

11

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


9

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

6

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


4

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


Que faire si vous voulez une feuille de style comme bootstrap au lieu d'un seul style?
Aditya Vikas Devarapalli
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.