在Angular动画上使用变量

Question

我想让动画使用组件中的变量而不是硬编码十六进制颜色。我该怎么做？ 我需要提一下，我真的需要这个，因为将来我想创建随机颜色，所以我需要从变量中获取这些颜色。这是我的代码：

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css'],
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee'
        // transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#ff0000'
        // something like this
        // backgroundColor: this.color;
        // transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('1000ms ease-out'))
    ])
  ]
})
export class DemoComponent implements OnInit {

  color:string = "#ff0000";

  inactive: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  get stateName() {
    return this.inactive ? 'inactive' : 'active';
  }

  toggle() {
    this.inactive = !this.inactive;
  }
}