angular 2 /4 中的字符串插值

Question

如何在我们的模板中使用打字稿文件中定义的变量多色？：-

我试过这样-webkit-linear-gradient(135deg, {{multicolors}} 50%, lightgray 50%)但是没有用，有什么解决办法吗？

Answer 1

我会像这样创建管道：

@Pipe({ name: 'safeStyle' })
export class SafeStylePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(style) {
    return this.sanitizer.bypassSecurityTrustStyle(style);
  }
}

然后如下使用

<div [style.background]="'-webkit-linear-gradient(135deg, ' + multicolors + ' 50%, lightgray 50%)' | safeStyle">
  Test
</div>

Plunker Example

另见

angular 2 /4 中的字符串插值

string interpolation in angular 2 /4

typescript

angular2-template

angular