angular 动态绑定样式

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