Angular ngstyle für mehrere Arten

Question

ich auf einer einfachen animation library arbeitete, wo mein Benutzer meine Komponente Bindung mit Eigenschaft ändern kann, so weit habe ich getan, um den Anschluss an ihre Wahl gelten:

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

Aber für zukünftige Erweiterungen ich möchte diese ganze Schlamassel mit [ngStyle]="styleObject" ändern, um mehr Eigenschaften zu vereinfachen das Hinzufügen, ich versuche, dies zu erreichen wie solche:

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

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

Aber aus irgendeinem Grund <div [ngStyle]="styleObject"></div> nimmt nicht in das Konto Stil oben gezeigt.

Bitte beachten Sie, dass das Hinzufügen von + 'px' und tun height.px mein Problem nicht löst.

Was sehe ich nicht?

-

einige Tests haben gezeigt, dass

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

Werke und an die div angewandt, aber die 200 mit this.height (vom Typ number) ersetzt nicht.

Answer 1

Assalamualaikum,

Wenn Sie ngStyle verwenden, sollten Sie eine Funktion erstellen Sie eine der folgenden Rückkehr: eine Zeichenfolge, ein Array oder ein Objekt.

wenn Sie ein Objekt Sie Folgendes tun zurückzukehren:

in der Vorlage:

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

in Ihrer Komponente:

export class AppComponent{ 
styleObject(): Object { 
     if (/** YOUR CONDITION TO SHOW THE STYLES*/ ){ 
      return {height: this.height,width: this.width} 
     } 
     return {} 
    } 
} 

Answer 2

Wenn Sie Ihren styleObject wie die this.height definieren und this.width wird nicht definiert. Definieren Sie mindestens styleObject in ngOnInit, in denen Bindungen garantiert initialisiert werden.

Für ein dynamischeres Gefühl, wo der Benutzer Eigenschaften ändern kann, nachdem die Komponente gerendert wurde, können Sie Getter/Setter verwenden.

Es wird wie folgt aussehen:

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

Sie wahrscheinlich die Getter weglassen können, eigentlich.