angular 动态绑定样式

关注

转载最新推荐文章于 2026-07-22 18:37:03 发布 2.5k 阅读 AI 写同款· GEO 优化 ›

angular10 动态绑定样式 <td nzEllipsis> <div style="display: inline-flex"> <a [ngStyle]="{'color':data.fdfsFileName!=undefined?'#ccc':'#1890ff','line-height': '32px','cursor':'pointer'}" ><input style="border: 0px;background: transparent;width: 33px... 阅读详情

demo09.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'demo09',
    template: `
        <button [ngClass]="{myHightlight:true}">按钮</button>
        <h1 [ngStyle]="{opacity:myOpacityValue}">透明度是动态绑定过来的</h1>
    `,
    styleUrls:['./test.css']
})

export class Demo09Component implements OnInit {
    myOpacityValue=0.2;
    constructor() { }

    ngOnInit() { }
}

test.style

.myHightlight{
    color: blue;
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
      <h1>Hello {{name}}</h1>
      <demo09></demo09>
  `,
})
export class AppComponent  { name = 'New Year'; }

收录于