在Angular 2中动态更新CSS

Question

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

正如你可以看到有在2个属性width和height。我希望宽度和高度的css样式与width和height属性的值匹配，并且当这些属性更新时，div的宽度和高度也会更新。完成此操作的正确方法是什么？

Answer 1

尝试这个

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

[更新]：设置使用百分比

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