Question

此处示例：

https://embed.plnkr.co/TGPRooggnDNO4FEiWmXb/

这是bootstrap HTML

<button type="button" class="btn btn-default hidden-xs" (click)="voteUp()" style="margin-top:5px; margin-right:5px; margin-left: 5px;">Vote up&nbsp;
  <span class="glyphicon glyphicon-arrow-up" [@upArrowState]="upArrowState" (@upArrowState.done)="upArrowAnimationDone($event, post, true)"></span>
</button>

<button type="button" class="btn btn-default visible-xs btn-vote" (click)="voteUp()">
  <span class="glyphicon glyphicon-arrow-up" style="left: -2px" [@upArrowState]="upArrowState" (@upArrowState.done)="upArrowAnimationDone($event, post, true)"></span>
</button>

所以我假设hidden-xs按钮和visible-xs按钮在任何时候都在同一个地方，并且都注册了（点击）事件。甚至是看不见的按钮。

我只需要点击一下（或只是按下可见按钮来注册按钮）

Answer 1

单击处理程序只调用一次，如果将console.log移动到voteUp()处理程序，则可以看到。此问题与动画有关。

我认为你绝对应该在那里移动逻辑（this.vote()调用），而不是动画回调。

其他可能性可能只使用(@upArrowState.done)="upArrowAnimationDone($event, post, true)"一次，而不是两个按钮。

当您删除那些hidden/visible类时，问题会更明显 - 因为动画具有相同的名称，您将看到单击一个按钮将切换两个动画上的动画，从而为每个类调用动画回调他们

当我使用带引导程序的hidden-xs按钮时获得两次按钮（Angular）

1 个答案: