如何使用不同的字体 - 真棒图像动态切换按钮图像？

Question

我有一个按钮，可以在“运行”和“暂停”的字体 - 真棒图像之间切换，每次用户点击都是如此。

角度应用程序中的语法是什么样的？ 我要求标准方法/建议的原因是我尝试了2个不同的按钮并使用ng-show并且没有运气。

Answer 1

您可以在组件中使用简单的boolean值，在HTML中使用*ngIf语句来显示/隐藏必要的图标（或任何其他元素），这将基于boolean值。您还需要将(click)="isPlaying = !isPlaying"添加到该图标以触发状态：

HTML：

<i class="fa fa-play-circle" aria-hidden="true" *ngIf="!isPlaying" (click)="isPlaying = !isPlaying"></i>
<i class="fa fa-pause-circle" aria-hidden="true" *ngIf="isPlaying" (click)="isPlaying = !isPlaying"></i>

组件：

public isPlaying: boolean = false;

如果您的逻辑将如我的示例中那么简单，那么也可以保留HTML中的最小逻辑，但如果不是 - 更好地在组件内创建触发器方法。