Angulaire ngStyle pour plusieurs styles

Je suis en train de travailler sur un simple animation de la bibliothèque où mon utilisateur peut modifier mon composant à l'aide de la propriété de liaison, jusqu'à présent, j'ai été faire les opérations suivantes pour appliquer leurs choix:

<div [style.background]="color" [style.width.px]="width" [style.height.px]="height"></div>

Mais pour les futurs ajouts je souhaite changer à tout ce gâchis avec [ngStyle]="styleObject" pour simplifier l'ajout de plus de propriétés, je suis en train de réaliser la présente comme telle:

@Input() width: number;
@Input() height: number;

public styleObject: Object = {
    'height': this.height,
    'width': this.width
};

Mais pour une raison quelconque <div [ngStyle]="styleObject"></div> est de ne pas prendre en compte le style illustré ci-dessus.

Veuillez noter que l'ajout de + 'px' et de faire height.px ne résout pas mon problème.

Que suis-je pas voir?

--

Quelques tests ont montré que

styleObject = {
    'height': 200 + 'px',
    'background': 'red'
};

fonctionne et est appliqué à la div, mais que le remplacement de 200 avec this.height (de type number) ne fonctionne pas.

InformationsquelleAutor Christopher | 2017-06-09
  1. 10

    Lorsque vous utilisez ngStyle vous devez créer une fonction retournant l'une des opérations suivantes: une chaîne de caractères, un tableau ou un objet.

    si vous souhaitez retourner un Objet de la manière suivante:

    dans votre modèle:

    <div [ngStyle]="styleObject()"></div>

    dans votre composant:

    export class AppComponent{
 styleObject(): Object {
       if (/** YOUR CONDITION TO SHOW THE STYLES*/  ){
           return {height: this.height,width: this.width}
       }
       return {}
   }
}
    • Merci beaucoup !
    • votre Vous êtes les bienvenus Chris! Je suis content que cela vous a aidé 🙂
    • WaleykumusSalaam. Grâce Hamed. Cela m'a aidé dans Angulaire 5.
    InformationsquelleAutor Hamed Baatour
  2. 2

    Vous pouvez énumérer les multiples règles de style comme ça à l'intérieur de ngStyle:

    <img src="..." [ngStyle]="{'height' : size+'px', 'width' : size+'px'}" />
    InformationsquelleAutor yglodt
  3. 0

    Si vous définissez votre styleObject comme ça this.height et this.width ne sera pas défini. À tout le moins, de définir les styleObject dans ngOnInit dans lequel les liaisons seront garantis pour être initialisé.

    Pour une impression de dynamisme, où l'utilisateur peut modifier les propriétés fois que le composant a été rendu, vous pouvez utiliser des getters/setters.

    Il ressemblera à quelque chose comme ceci:

    export class YourComponent {    
  styleObject: {[key: string]: string} = {};

  @Input()
  set width(w: string) {
    styleObject = Object.assign({}, styleObject, {width: w});
  }
  get width() { return styleObject.width; }

  @Input()
  set height(h: string) {
    styleObject = Object.assign({}, styleObject, {height: h});
  }
  get height() { return styleObject.height; }
}

    Vous pouvez probablement omettre les getters, en fait.

    • Comment l'utilisateur peut-il accéder à ces setters? Par programmation?
    • Les opérateurs sont appelés à partir du modèle. Par exemple: <votre composant [largeur]="width" /> qui fera appel à la largeur setter chaque fois que la largeur des changements.
    InformationsquelleAutor ppham27
  4. 0

    Essayer cette approche

    [ngStyle]="isTrue ? {'width': '100%', 'margin-right': '0'} : {}"
    InformationsquelleAutor Alex Karpov