将数据传递给样式组件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

不支持样式绑定。 你可以使用样式绑定

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

Answer 2

我真的很惊讶我终于使用ngx-css变量找到了一个有点可靠的解决方案。

我的用例是我有一个第三方库，它在绘制图表时会在其自身内创建许多子组件。

我需要用url(#<uuid>)设置线性渐变。

CSS模板

  /deep/ngx-charts-line-chart {
  display: flex;
  /deep/ngx-charts-chart {
    display: flex;
    div.ngx-charts-outer {
      display: flex;
      svg {
        .line {
          stroke: var(--gradient);
          stroke-width: 4px;
        }
      }
    }
  }
}

零件

import * as uuid from 'uuid/v4';
...
  private _linearGradientId = uuid();
  get uuid() {
    return this._linearGradientId;
  }
  get gradientCss() {
    return {
      '--gradient': `url(#${this.uuid})`
    }
  }
...

HTML模板

...
<ngx-charts-line-chart
  [css-vars]="gradientCss"
...
<ngx-charts-line-chart>

你仍然必须对组件进行深度样式，因为它的组件不在你的模板中，但是ngx-css-variables会在style属性中注入一个函数，这看起来很糟糕，但是它有效！

所以现在stroke来自运行时的动态函数。 超酷。 我希望有角度支持这个原生。