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() { }

}

我想从组件中设置size属性。

在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-variables最终找到一个切实可行的解决方案感到惊讶。

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

我需要使用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来自运行时的动态函数。超酷。我希望有角度的本地支持。

将数据传递给样式组件angular2

2 个答案: