css - 将数据传递给样式组件 angular2

Question

如何将数据从 angular 标签传递到 @Component 中的样式？

这是我的组件:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'icon',
  template: `<svg class="icon"><use attr.xlink:href="#{{name}}"></use></svg>`,
  styles: ['.icon{width:{{size}}px;}'] 
})
export class IconComponent {
  @Input() name: string;
  @Input() size: any; 

  constructor() { }

}

我想设置组件的大小属性。

在 html 文件中使用:

<icon name="logo" size="37"></icon>

Answer 1

不支持样式绑定(bind)。您可以像这样使用样式绑定(bind)

template: `<svg class="icon" [style.width.px]="size"><use attr.xlink:href="#{{name}}"></use></svg>`,