web-dev-qa-db-fra.com

Angulaire 2.0 et style ng

Je construis un composant 2.0 angulaire et je veux contrôler son style de manière dynamique (en utilisant ng-style). Après un aperçu rapide de la documentation d'Angular 2, j'ai essayé ceci:

<div class="theme-preview" ng-style="{'font-size': fontSize}">
  {{fontSize}}
</div>

Et vu que la taille est effectivement imprimée à l'intérieur de la div mais n'a pas affecté le style. fontSize est l'une des propriétés du composant, ce qui signifie que le composant l'obtient de son parent comme ceci:

<my-component [font-size]="size" />

À l'intérieur du composant, j'ai:

@Component({
  selector: 'XXX',
  properties: ['fontSize']
})

Est-ce que j'ai râté quelque chose?

javascriptangular
21
Yaniv Efraim

Mettre à jour

Les gens parviennent toujours à cette réponse, j'ai donc mis à jour le plnkr en beta.1. Deux choses ont changé jusqu'à présent

  • NgStyle n'est plus nécessaire d'être explicitement ajouté dans la propriété directives. Cela fait partie des directives communes ajoutées par défaut.
  • La syntaxe a changé, il doit maintenant s'agir d'un cas de chameau.

Exemple

@Component({
  selector : 'my-cmp',
  template : `
    <div class="theme-preview" [ngStyle]="{'font-size': fontSize+'px'}">
   {{fontSize}}
  </div>`
})
class MyCmp {
  @Input('font-size') fontSize;
}

@Component({ 
  selector: 'my-app',
  directives: [MyCmp],
  template: `
    <my-cmp [font-size]="100"></my-cmp>
  `
})

Voir ceci plnkr (Mis à jour en beta.1)

48
Eric Martinez

Pour un style spécifique, vous pouvez également utiliser ceci:

<div class="theme-preview" [style.font-size]="fontSize+'px'">
11
nir

Quelque chose comme cela fonctionne actuellement sur la dernière version de angular 4, la syntaxe a été modifiée, veuillez noter le [ngStyle] 

.color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
}

<div class="color-box" [ngStyle]="{'background-color': your.model.object.color_code}"></div>
0
d1jhoni1b