Angular 2: Comment styliser l'élément hôte du composant?
j'ai de la composante Angulaire 2 appelé mon-comp:
<my-comp></my-comp>
comment styliser L'élément hôte de ce composant en angle 2?
en polymère, vous utiliserez le sélecteur": host". J'ai essayé en angle 2. Mais ça ne fonctionne pas.
:host {
display: block;
width: 100%;
height: 100%;
}
j'ai aussi essayé d'utiliser le composant sélecteur:
my-comp {
display: block;
width: 100%;
height: 100%;
}
les Deux approches ne semblent pas fonctionner.
Merci.
6 réponses
il y avait un bug, mais il a été corrigé dans l'intervalle. :host { } fonctionne bien maintenant.
sont également pris en charge sont
-
:host(selector) { ... }pourselectorafin de faire correspondre les attributs, classes ... sur l'élément hôte -
:host-context(selector) { ... }pourselectorpour correspondre à des éléments, des classes, des ...sur les composants parents -
selector /deep/ selector(aliasselector >>> selectorne fonctionne pas avec SASS) pour que les styles correspondent au-delà des limites des éléments-
mise à jour: SASS déprécie
/deep/.
Angular (TS et Dart) a ajouté::ng-deepcomme remplacement qui est également compatible avec SASS. -
UPDATE2:
::slotted::slottedest maintenant supporté par tous les nouveaux les 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 en composante angulaire 2
/deep/ et >>> sont pas touché par le même sélecteur combinators que dans Chrome qui sont obsolètes.
Angular les émule (les réécrit), et ne dépend donc pas des navigateurs qui les supportent.
C'est aussi la raison pour laquelle /deep/ et >>> ne fonctionnent pas avec ViewEncapsulation.Native qui permet le DOM shadow natif et dépend du support du navigateur.
j'ai trouvé une solution pour ne styliser que l'élément composant. Je n'ai pas trouvé de documentation sur la façon dont cela fonctionne, mais vous pouvez mettre des valeurs d'attributs dans la directive component, 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 bug, et maintenant vous pouvez style l'élément hôte même dans le fichier css, comme ceci:
:host{ ... }
Check out cette question . Je pense que le bogue sera résolu lorsque nouvelle logique de précompilation de modèle sera implémentée. Pour l'instant, je pense que le mieux que vous pouvez faire est d'envelopper votre modèle dans <div class="root"> et le style de ce 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 .classe à votre hôte si vous auriez quelques styles que vous souhaitez appliquer.
export class MyComponent{
@HostBinding('class') classes = 'classA classB';
pour tous ceux qui cherchent à styliser les éléments enfants d'un :host voici un exemple d'utilisation de ::ng-deep
:host::ng-deep <child element>
E. g :host::ng-deep span { color: red; }
comme d'autres ont dit /deep/ est déprécié
Essayez le :host > /deep/ :
ajouter ce qui suit au parent.composant.moins file
:host {
/deep/ app-child-component {
//your child style
}
}
remplacer l'application-child-component par votre sélecteur d'enfant