dynamic更新Angular 2中的css

假设我有一个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; } 

该组件的模板html文件

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

最后是这个组件的CSS文件

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

正如你所看到的，这个类有两个属性， width和height 。 我希望宽度和高度的CSS样式匹配宽度和高度属性的值，当属性更新时，div更新的宽度和高度。 什么是正确的方法来完成这个？

Answer 1

尝试这个

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

[更新]：在％use中设置

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

Answer 2

用@ Gaurav的答案来使用％而不是px或em，这只是

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

Answer 3

这应该做到这一点：

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

Answer 4

在这里检查工作演示

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

Answer 5

您可以通过将dynamic值附加到div的inline [style.width]和[style.hiegh]属性来dynamic更改div的样式（宽度和高度）。

在你的情况下，你可以绑定HomeComponent类的宽度和高度属性与div的内联样式宽度和高度属性，像这样… 由Sasxa

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

对于工作演示，看看这个plunker（ 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); } } 

Answer 6

你也可以使用hostbinding：

 import { HostBinding } from '@angular/core'; export class HomeComponent { @HostBinding('style.width') width: Number; @HostBinding('style.height') height: Number; } 

现在，当您从HomeComoponent中更改宽度或高度属性时，这应该会影响样式属性。

Answer 7

以上所有答案都很好。 但是，如果您试图find一个解决scheme，不会改变下面的HTML文件是有帮助的

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

您可以import {Renderer} from '@angular/core';导入渲染器import {Renderer} from '@angular/core';

Answer 8

我喜欢上面的WenhaoWuI的想法，但是我需要在PrimeNG树组件中识别带有“.ui-tree” 类的div来dynamic设置高度。 所有的答案，我可以find需要的div命名（即#treediv），使@ViewChild（），@ViewChildren（），@ContentChild（），@ContentChilden（）等使用这与第三方零件。

我终于find了GünterZöchbauer的一个片段：

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

这很容易：

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