欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

angular 动态绑定样式

程序员文章站 2022-05-15 18:41:29
...

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'; }