Question

我正在使用Angular-7。我有一个用于渲染图标图像背景的简单组件。它在模板中包含一个SVG代码块，该代码块实质上呈现了一个填充的矩形。该应用程序可以实例化这些数据驱动的组件中的大约20个。

最初，背景矩形具有填充色，该填充色绑定到在构造时分配的组件内的属性。现在，我希望通过应用线性渐变来“微调”它的颜色取决于图标子类型。换句话说，我想在线性渐变的stop-color元素的stop属性上使用Angular属性绑定。

父级模板代码段-创建多个图标

<ng-container *ngFor="let node of myNodes">
  <my-node-component [nodeInfo]=node></my-node-component>
</ng-container>

my-node-component

的模板代码段

<svg viewbox="0 0 80 80" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1" x1=0 y1=0 x2=0 y2=1>
      <stop offset=0 style.stop-color="{{color1}}" />
      <stop offset=1 style.stop-color="{{color2}}" />
    </linearGradient>
  </defs>

  <g>
    <rect width="80" height="80" rx="5" ry="5"
      style="stroke-width:0"
      fill="url(#Gradient1)" />
  </g>
</svg>

my-node-component

的组件类代码段

@Input() nodeInfo: INodeInfo;  

ngOnInit(): void {
  this.color1 = this.nodeInfo.color1;
  this.color2 = this.nodeInfo.color2;
}

请注意，属性绑定本身很好，就像使用ngOnInit访问组件的@Input参数一样。

发生的事情是第一个组件被实例化并且似乎正确绑定到属性值this.color1和this.color2。但是，所有剩余的图标组件在实例化时显然都绑定到相同的第一属性值颜色，从而导致每个图标都具有相同的颜色渐变。就像我说的那样，当直接在矩形的“填充”元素上使用属性绑定时，每个图标的颜色都正确。这告诉我Angular的*ngFor迭代器行为正确。

也许我没有正确理解“ defs”块的范围。好像“ defs”的内容对组件都是“静态的”？我无法在Angular或SVG教程中验证此假设。有一个或两个博客和问题提示要使用多个linearGradient声明-尚不清楚这是否适用于这里？任何建议都会有所帮助。

我可以在SVG defs块中使用Angular属性绑定吗？

0 个答案: