假设我有一个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的宽度和高度也会更新。完成此操作的正确方法是什么?
width
height
尝试这个
<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>