Ionic 3 侧边栏添加徽章通知不起作用
Ionic 3 side bar add badge notification not working
我正在为我的应用侧边栏使用 **Ionic 3 - badge** 。我在添加徽章但未显示时遇到了一些冲突
任何人都知道如何在侧栏中显示徽章
谢谢
我的代码部分
app.html
<ion-list class="user-list" >
<button ion-item menuClose class="text-1x" *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)" >
<ion-icon item-left [name]="menuItem.icon" style="color: black; " ></ion-icon>
<span ion-text style="color: black; border-bottom: none;">{{menuItem.title}}</span>
<ion-badge">{{p.badgeCount}}</ion-badge>
</button>
</ion-list>
app.component.ts
export interface MenuItem {
title: string;
component: any;
icon: string;
buttonName:string;
}
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = SigninPage;
selectedTheme: String;
appMenuItems: Array<MenuItem>;
constructor(public platform: Platform, private settings: SettingsProvider, private master: master) {
this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
this.appMenuItems = [
{title: 'Home', component: HomePage, icon: 'ios-home-outline'},
{title: 'Notification', component: CheckoutPage, icon: 'ios-basket-outline',buttonName: 'badgeNumber ',},
];
}
我解决了我的问题
我改这个<ion-badge>{{menuItem.badgeCount}}</ion-badge>
app.component.ts
export interface MenuItem {
title: string;
component: any;
icon: string;
buttonName:string;
}
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = SigninPage;
selectedTheme: String;
appMenuItems: Array<MenuItem>;
constructor(public platform: Platform, private settings: SettingsProvider, private master: master) {
this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
this.appMenuItems = [
{title: 'Home', component: HomePage, icon: 'ios-home-outline'},
{title: 'Notification', component: CheckoutPage, icon: 'ios-basket-outline',badgeCount: '5 ',},
];
}
app.html
<ion-list class="user-list" >
<button ion-item menuClose class="text-1x" *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)" >
<ion-icon item-left [name]="menuItem.icon" style="color: black; " ></ion-icon>
<span ion-text style="color: black; border-bottom: none;">{{menuItem.title}}</span>
<ion-badge>{{menuItem.badgeCount}}</ion-badge>
</button>
</ion-list>
我正在为我的应用侧边栏使用 **Ionic 3 - badge** 。我在添加徽章但未显示时遇到了一些冲突 任何人都知道如何在侧栏中显示徽章 谢谢
我的代码部分
app.html
<ion-list class="user-list" >
<button ion-item menuClose class="text-1x" *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)" >
<ion-icon item-left [name]="menuItem.icon" style="color: black; " ></ion-icon>
<span ion-text style="color: black; border-bottom: none;">{{menuItem.title}}</span>
<ion-badge">{{p.badgeCount}}</ion-badge>
</button>
</ion-list>
app.component.ts
export interface MenuItem {
title: string;
component: any;
icon: string;
buttonName:string;
}
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = SigninPage;
selectedTheme: String;
appMenuItems: Array<MenuItem>;
constructor(public platform: Platform, private settings: SettingsProvider, private master: master) {
this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
this.appMenuItems = [
{title: 'Home', component: HomePage, icon: 'ios-home-outline'},
{title: 'Notification', component: CheckoutPage, icon: 'ios-basket-outline',buttonName: 'badgeNumber ',},
];
}
我解决了我的问题
我改这个<ion-badge>{{menuItem.badgeCount}}</ion-badge>
app.component.ts
export interface MenuItem {
title: string;
component: any;
icon: string;
buttonName:string;
}
@Component({
templateUrl: 'app.html'
})
export class MyApp {
@ViewChild(Nav) nav: Nav;
rootPage: any = SigninPage;
selectedTheme: String;
appMenuItems: Array<MenuItem>;
constructor(public platform: Platform, private settings: SettingsProvider, private master: master) {
this.settings.getActiveTheme().subscribe(val => this.selectedTheme = val);
this.appMenuItems = [
{title: 'Home', component: HomePage, icon: 'ios-home-outline'},
{title: 'Notification', component: CheckoutPage, icon: 'ios-basket-outline',badgeCount: '5 ',},
];
}
app.html
<ion-list class="user-list" >
<button ion-item menuClose class="text-1x" *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)" >
<ion-icon item-left [name]="menuItem.icon" style="color: black; " ></ion-icon>
<span ion-text style="color: black; border-bottom: none;">{{menuItem.title}}</span>
<ion-badge>{{menuItem.badgeCount}}</ion-badge>
</button>
</ion-list>