angular - 在 Angular 中动态更改 SVG 颜色

Question

我在 Angular 中使用 svg 绘制了几个圆圈，如下所示：

<div (window:resize)="onEatableResized($event)">
  <svg id="eater" (click)="onEaterClicked()"
      [@eater_circle_trigger]="eater_clicked ? 'eater_clicked' : 'none'"
      (@eater_circle_trigger.done)="onEaterDone($event)"
      [attr.width]=eater_data.box_size
      [attr.height]=eater_data.box_size>
        <circle cx="20" cy="20" stroke-width="1"
          [attr.r]=eater_data.radius
          [attr.stroke]=eater_data.stroke_color
          [attr.fill]=eater_data.fill_color>
        </circle>
  </svg>

  <svg *ngFor="let ncircles of total_circles|times; index as id"
    id="{{ 'eatable_' + id }}"
    [attr.width]=eatable_data.box_size
    [attr.height]=eatable_data.box_size>
      <circle cx="20" cy="20" stroke-width="1"
        [@eater_trigger]="dead ? 'dead' : 'alive'"
        [attr.r]=eatable_data.radius
        [attr.stroke]=eatable_data.stroke_color
        [attr.fill]=eatable_data.fill_color
      />
    </svg>
</div>

它们如下所示：

当eater点击带有 id 的 svg（红色圆圈）时，它会通过动画移动到下一个圆圈：

@Component({
  selector: "app-eatable",
  templateUrl: "./eatable.component.html",
  styleUrls: ["./eatable.component.css"],
  animations: [
    trigger('eater_circle_trigger', [
      state('eater_clicked', style({
        transform: 'translate(35px, 0px)'
      })),
      transition('* => eater_clicked', [
        animate('1s ease-in-out')
      ])
    ]),
    trigger('eater_trigger', [
      state('dead', style({
        fill: 'while'
      })),
    ])
  ]
})

动画完成后，我希望圆圈的颜色从黑色变为白色，使用eater_trigger圆圈eater移动。但是动画完成后，颜色不会改变。这是回调onEaterDone：

onEaterDone(event)
  {
    this.current_eatable++;
    this.dead = true;
    console.log(event.fromeState + " => " + event.toState);
    if (this.current_eatable == this.total_circles)
    {
      console.log('done');
    }
    else
    {
      
    }
  }

输出：

如何使那个圆圈颜色变为白色？我是 Angular 的新手，因此非常感谢详细说明。

标签： angular

Answer 1

我会在您的onEaterDone回调中过滤状态，因为它会为每个状态调用并done立即设置属性，而 Angular无法检测到 click 上的更改。

onEaterDone(event) {
  if (event.toState === 'none') {
    return;
  }

然后，我根本不会使用done属性，因为动画会立即应用于所有黑色圆圈。你已经有了current_eatable计数器，那么为什么不在你的动画条件中使用它呢？

[@eater_trigger]="id < current_eatable ? 'dead' : 'alive'"

Ng 运行示例