动态更新角色2中的css

前端之家收集整理的这篇文章主要介绍了动态更新角色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;
}

正如你可以看到,类中​​有两个属性,宽度和高度。我想要的宽度和高度的CSS样式与width和height属性的值匹配,当属性更新时,div更新的宽度和高度。什么是正确的方式来完成这个?

解决方法

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

猜你在找的CSS相关文章