动态更新Angular 2中的css [英] Dynamically updating css in Angular 2

问题描述

假设我有一个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>此div中的某些内容< / div> ; 
  

最后是此组件的css文件

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

可以看到类中有2个属性， width 和 height 。我想要CSS宽度和高度的样式，以匹配width和height属性的值，当属性更新时，div的更新的宽度和高度。

<$>

解决方案

p $ p> < div class =home-component
[style.width.px] =width
[style.height.px] =height >此div中的一些内容< / div>


Let's say I have an Angular2 Component

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

The template html file for this component

//home.component.html

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

And finally the css file for this component

//home.component.css

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

As you can see there are 2 properties in the class, width and height. I would like the css styles for width and height to match the values of the width and height properties and when the properties update, the width and height of the div update. What is the proper way to accomplish this?

解决方案

Try this

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

这篇关于动态更新Angular 2中的css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！