在Angular 2中动态更新CSS

  • Z时代
  • 2024-01-10
  • 分类：问答

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

回答：

尝试这个

 <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>

以上是 在Angular 2中动态更新CSS 的全部内容， 来源链接： utcz.com/qa/418501.html

回到顶部