CSS in Angular 2 dynamisch aktualisieren

Angenommen, ich habe eine Angular2-Komponente

//home.component.ts

import { Component } from 'angular2/core';

@Component({
    selector: "home",
    templateUrl: "app/components/templates/home.component.html",
    styleUrls: ["app/components/styles/home.component.css"]
})
export class HomeComponent {
    public width: Number;
    public height: Number;
} 

Die HTML-Vorlagendatei für diese Komponente

//home.component.html

<div class="home-component">Some stuff in this div</div>

Und schließlich die CSS-Datei für diese Komponente

//home.component.css

.home-component{
    background-color: red;
    width: 50px;
    height: 50px;
}

Wie Sie sehen können, gibt es 2 Eigenschaften in der Klasse widthund height. Ich möchte, dass die CSS-Stile für Breite und Höhe mit den Werten der Eigenschaften für Breite und Höhe übereinstimmen und wenn die Eigenschaften aktualisiert werden, die Breite und Höhe der div-Aktualisierung. Was ist der richtige Weg, um dies zu erreichen?

Versuche dies

 <div class="home-component" 
 [style.width.px]="width" 
 [style.height.px]="height">Some stuff in this div</div>

[Aktualisiert]: Zum Einstellen in% verwenden

[style.height.%]="height">Some stuff in this div</div>

Es ist einfach,% anstelle von px oder em mit der Antwort von @ Gaurav zu verwenden

<div class="home-component" [style.width.%]="80" [style.height.%]="95">
Some stuff in this div</div>

Dies sollte es tun:

<div class="home-component" 
     [style.width]="width + 'px'" 
     [style.height]="height + 'px'">Some stuff in this div</div>

Sie können auch Hostbinding verwenden:

import { HostBinding } from '@angular/core';

export class HomeComponent {
    @HostBinding('style.width') width: Number;
    @HostBinding('style.height') height: Number;
} 

Wenn Sie nun die Eigenschaft width oder height in der HomeComponent ändern, sollte dies Auswirkungen auf die Stilattribute haben.

Die akzeptierte Antwort ist nicht falsch.

Für gruppierte Stile kann auch die Direktive ngStyle verwendet werden.

<some-element [ngStyle]="{'font-style': styleExpression, 'font-weight': 12}">...</some-element>

Die offiziellen Dokumente sind hier

Überprüfen Sie die funktionierende Demo hier

import {Component,bind} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {FORM_DIRECTIVES} from 'angular2/form';

import {Directive, ElementRef, Renderer, Input,ViewChild,AfterViewInit} from 'angular2/core';

@Component({
  selector: 'my-app',
    template: `
    <style>
       .myStyle{
        width:200px;
        height:100px;
        border:1px solid;
        margin-top:20px;
        background:gray;
        text-align:center;
       }
    </style>

          <div [class.myStyle]="my" [style.background-color]="randomColor" [style.width]="width+'px'" [style.height]="height+'px'"> my width={{width}} & height={{height}}</div>
    `,
    directives: []
})

export class AppComponent {
  my:boolean=true;
  width:number=200px;
  height:number=100px;
  randomColor;
  randomNumber;
  intervalId;
  textArray = [
    'blue',
    'green',
    'yellow',
    'orange',
    'pink'
  ];


  constructor() 
  {
    this.start();
  }

      start()
      { 
        this.randomNumber = Math.floor(Math.random()*this.textArray.length);
        this.randomColor=this.textArray[this.randomNumber];
        console.log('start' + this.randomNumber);
        this.intervalId = setInterval(()=>{
         this.width=this.width+20;
         this.height=this.height+10;
         console.log(this.width +" "+ this.height)
         if(this.width==300)
         {
           this.stop();
         }

        }, 1000);
      }
      stop()
      {
        console.log('stop');
        clearInterval(this.intervalId);
        this.width=200;
        this.height=100;
        this.start();

      }
 }

bootstrap(AppComponent, []);

Wenn Sie die Breite dynamisch mit Variablen festlegen möchten, verwenden Sie stattdessen [] geschweifte Klammern {{}}:

 <div [style.width.px]="[widthVal]"  [style.height.px]="[heightVal]"></div>

 <div [style.width.%]="[widthVal]"  [style.height.%]="[heightVal]"></div>

Sie können den Stil (Breite und Höhe) von div dynamisch ändern, indem Sie der inline-Eigenschaft [style.width] und [style.hiegh] von div einen dynamischen Wert hinzufügen.

In Ihrem Fall können Sie die Eigenschaft width und height der HomeComponent-Klasse wie folgt mit der Eigenschaft width and height des Inline-Stils des Div verknüpfen ... Wie von Sasxa angegeben

<div class="home-component" 
     [style.width]="width + 'px'" 
     [style.height]="height + 'px'">Some stuff in this div
</div>

Schauen Sie sich für die funktionierende Demo diesen Plunker an ( http://plnkr.co/edit/cUbbo2?p=preview ).

   //our root app component
import {Component} from 'angular2/core';
import {FORM_DIRECTIVES,FormBuilder,AbstractControl,ControlGroup,} from "angular2/common";

@Component({
  selector: 'home',
  providers: [],
  template: `
     <div class="home-component" [style.width]="width+'px'" [style.height]="height+'px'">Some this div</div>
     <br/>
     <form [ngFormModel]="testForm">
        width:<input type="number" [ngFormControl]="txtWidth"/> <br>
        Height:<input type="number"[ngFormControl]="txtHeight" />
     </form>
  `,
  styles:[`

      .home-component{
        background-color: red;
        width: 50px;
        height: 50px;
    }

  `],
  directives: [FORM_DIRECTIVES]
})
export class App {
  testForm:ControlGroup;
  public width: Number;
  public height: Number;
  public txtWidth:AbstractControl;
  public txtHeight:AbstractControl;

  constructor(private _fb:FormBuilder) {
      this.testForm=_fb.group({
        'txtWidth':['50'],
        'txtHeight':['50']
      });

      this.txtWidth=this.testForm.controls['txtWidth'];
      this.txtHeight=this.testForm.controls['txtHeight'];

      this.txtWidth.valueChanges.subscribe(val=>this.width=val);
      this.txtHeight.valueChanges.subscribe(val=>this.height =val);
  }
}

Ich mochte das Aussehen der obigen Idee von WenhaoWuI , aber ich musste das div mit der Klasse .ui-tree in der PrimeNG-Baumkomponente identifizieren , um die Höhe dynamisch festzulegen . Alle die Antworten , die ich die div finden konnte erforderlich genannt werden (dh #treediv) die Verwendung zu ermöglichen @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChilden()usw. Das war chaotisch mit einem Dritten Komponente.

Endlich habe ich einen Ausschnitt von Günter Zöchbauer gefunden :

ngAfterViewInit() {
  this.elRef.nativeElement.querySelector('.myClass');
}

Das machte es einfach:

@Input() height: number;
treeheight: number = 400; //default value

constructor(private renderer: Renderer2, private elRef: ElementRef) {  }

ngOnInit() {
    this.loading = true;
    if (this.height != null) {
        this.treeheight = this.height;
    }   
}

ngAfterViewInit() {
    this.renderer.setStyle(this.elRef.nativeElement.querySelector('.ui-tree'), 'height', this.treeheight + "px");
}

Alle oben genannten Antworten sind großartig. Wenn Sie jedoch nach einer Lösung suchen, die die folgenden HTML-Dateien nicht ändert, ist dies hilfreich

 ngAfterViewChecked(){
    this.renderer.setElementStyle(targetItem.nativeElement, 'height', textHeight+"px");
}

Sie können den Renderer aus importieren import {Renderer} from '@angular/core';

Sie können dies erreichen, indem Sie auch eine Funktion aufrufen

<div [style.width.px]="getCustomeWidth()"></div>

  getCustomeWidth() {
    //do what ever you want here
    return customeWidth;
  }

In HTML:

<div [style.maxHeight]="maxHeightForScrollContainer + 'px'">
</div>

In Ts

this.maxHeightForScrollContainer = 200 //your custom maxheight