Memperbarui css di Angular 2 secara dinamis

Katakanlah saya memiliki Komponen Angular2

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

File html template untuk komponen ini

//home.component.html

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

Dan terakhir file css untuk komponen ini

//home.component.css

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

Seperti yang Anda lihat, ada 2 properti di kelas, widthdan height. Saya ingin gaya css untuk lebar dan tinggi agar sesuai dengan nilai properti lebar dan tinggi dan ketika properti diperbarui, lebar dan tinggi pembaruan div. Apa cara yang tepat untuk mencapai ini?

Coba ini

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

[Diperbarui]: Untuk menyetel dalam% penggunaan

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

Untuk menggunakan% alih-alih px atau em dengan jawaban @ Gaurav, itu saja

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

Ini harus melakukannya:

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

Anda juga dapat menggunakan pengikatan host:

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

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

Sekarang ketika Anda mengubah properti lebar atau tinggi dari dalam HomeComponent, ini akan mempengaruhi atribut gaya.

Jawaban yang diterima tidak salah.

Untuk gaya yang dikelompokkan, seseorang juga bisa menggunakan direktif ngStyle.

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

Dokumen resmi ada di sini

Lihat Demo yang berfungsi di sini

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, []);

Jika Anda ingin menyetel lebar secara dinamis dengan variabel daripada gunakan tanda kurung [] sebagai gantinya {{}}:

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

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

Anda dapat secara dinamis mengubah gaya (lebar dan tinggi) div dengan melampirkan nilai dinamis ke properti inline [style.width] dan [style.hiegh] di div.

Dalam kasus Anda, Anda dapat mengikat properti lebar dan tinggi dari kelas HomeComponent dengan properti inline style width dan height seperti ini ... Seperti yang diarahkan oleh Sasxa

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

Untuk demo kerja, lihat plunker ini ( 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);
  }
}

Saya menyukai tampilan dari ide WenhaoWuI di atas, tetapi saya perlu mengidentifikasi div dengan kelas .ui-tree dalam komponen pohon PrimeNG untuk mengatur ketinggian secara dinamis. Semua jawaban yang saya bisa menemukan yang diperlukan div diberi nama (yaitu #treediv) untuk memungkinkan penggunaan @ViewChild(), @ViewChildren(), @ContentChild(), @ContentChilden()dll ini adalah berantakan dengan komponen pihak ketiga.

Saya akhirnya menemukan cuplikan dari Günter Zöchbauer :

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

Ini membuatnya mudah:

@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");
}

Semua jawaban di atas bagus. Tetapi jika Anda mencoba menemukan solusi yang tidak akan mengubah file html di bawah ini sangat membantu

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

Anda dapat mengimpor perender dari import {Renderer} from '@angular/core';

Anda dapat mencapai ini dengan memanggil fungsi juga

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

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

Dalam Html:

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

Dalam Ts

this.maxHeightForScrollContainer = 200 //your custom maxheight