web-dev-qa-db-fra.com

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

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

<my-comp></my-comp>

Comment qualifie-t-on l'élément Host 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 aussi essayé d'utiliser le composant comme sélecteur:

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

Les deux approches ne semblent pas fonctionner.

Merci.

cssangularcss-selectorsangular-components
161
Ravi Teja Gudapati

Il y avait un bug, mais il a été corrigé dans l'intervalle. :Host { } fonctionne bien maintenant.

Sont également supportés

  • :Host(selector) { ... } pour selector pour faire correspondre les attributs, les classes, ... de l'élément Host

  • :Host-context(selector) { ... } pour selector pour faire correspondre les éléments, les classes, ... aux composants parent

  • selector /deep/ selector (alias selector >>> selector ne fonctionne pas avec SASS) pour que les styles correspondent aux limites des éléments

    • UPDATE: SASS déconseille /deep/.
      Angular (TS et Dart) a ajouté ::ng-deep en tant que remplacement également compatible avec SASS.

    • UPDATE2: ::slotted::slotted est maintenant 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 Chargement du style css externe dans Angular 2 Component

/deep/ et >>> ne sont pas affectés par les mêmes combinateurs de sélecteur que dans Chrome qui sont déconseillés.
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 fonctionnent pas avec ViewEncapsulation.Native, qui active le DOM fantôme natif et dépend de la prise en charge du navigateur.

259
Günter Zöchbauer

J'ai trouvé une solution pour styler uniquement l'élément composant. Je n'ai pas trouvé de documentation sur son fonctionnement, mais vous pouvez mettre des valeurs d'attributs dans la directive 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 l'a mentionné Günter Zöchbauer, il y avait un bogue et vous pouvez maintenant attribuer un style à l'élément Host, même dans un fichier css, comme ceci:

:Host{ ... }
31
prespic

Départ ce numéro . Je pense que le bogue sera résolu quand la nouvelle logique de précompilation de template sera implémentée. Pour l’instant, je pense que le mieux que vous puissiez faire est d’envelopper votre modèle dans <div class="root"> et d’appeler ce style 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

11
alexpods

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

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

Pour ceux qui cherchent à styler les éléments enfants d'un :Host, voici un exemple d'utilisation de ::ng-deep

:Host::ng-deep <child element>

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

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

5
Petros Kyriakou

Essayez le: hôte>/deep /:

Ajouter ce qui suit au fichier parent.component.less

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

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

3
abahet