如何使用[innerHtml] Angular 2绑定到样式属性？

Question

我可以使用ViewEncapsulation设置html样式。一切都很好。但是我希望能够绑定到某个属性，特别是background-color。我使用的课程效果很好...

这是ViewEncapsulation部分：

@Component({
  selector: 'legend-slot',
  templateUrl: `legend-slot.component.html`,
  styleUrls: ['legend-slot.component.css'],
  encapsulation: ViewEncapsulation.None
})

这是我要返回的部分：

return `
  <div class="testCircle" [style.background-color]="getColor(layer.style)"></div>
  `;

使用常规html可以正常工作。我什至只是在功能所在的地方放上类似红色的东西，但仍然无法正常工作。我试图在管道中使用它。但是无济于事。

import {DomSanitizer} from '@angular/platform-browser';
import {PipeTransform, Pipe} from '@angular/core';

@Pipe({ name: 'safeHtml' })
export  class SafeHtmlPipe implements PipeTransform {
  constructor(private sanitized: DomSanitizer) {

  }
  transform(value: any, ...args): any {
    return this.sanitized.bypassSecurityTrustHtml(value);
  }

}

我可以只使用一堆NgIf，但是我不认为那是最好的选择。