Question

我需要使用ngClass在我的网页上制作通知徽章行为。如果我使用它：

<ion-tab [root]="tabPage2" tabTitle="Em Andamento" tabIcon="qi-th-list" tabBadgeStyle="danger" tabBadge=2> </ion-tab>

我试图做一些这样的事情：

<ion-tab [root]="tabPage2" tabTitle="Em Andamento" tabIcon="qi-th-list" tabBadgeStyle="danger" [ngClass]="{ 'tabBadge={{tripsCount}}': tripsCount > 0 }"> </ion-tab>

但当然，它没有用。

如果使用Angular，当tripCount大于零时，如何让此徽章显示行程次数？

Answer 1

您可以使用以下数据绑定语法在Ionic选项卡上设置tabBadge属性：

<ion-tab [tabBadge]="tripsCount" ...></ion-tab>

或者这个：

<ion-tab tabBadge="{{tripsCount}}" ...></ion-tab>

可以在this stackblitz中测试代码。出行次数显示在右下方。它初始化为零，并在3秒后开始递增。当值为1或更大时，该值可见。

Answer 2

在传递给ngClass的对象中，键是类的名称，您可以使用javascript表达式作为值：

[ngClass]="{'tabBadge': tripsCount > 0 }"

使用输入变量设置Ionic tabBadge

2 个答案: