将数据传递到样式组件 Angular2

Question

如何将数据从角度标签传递到@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 变量找到了一个有点可靠的解决方案。

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

我需要用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})`
    }
  }
...

网页模板

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

您仍然需要对组件进行深度样式设置，因为它的组件不在您的模板中，但ngx-css-variables会将一个函数注入 style 属性中，这看起来很笨拙，但它有效！

所以现在stroke来自运行时的动态函数。超级酷。我希望角支持这一点。