如何在離子2應用程序的側面導航面板菜單中設置圖標

我正嘗試在離子2應用程序的側面導航面板上設置圖標，請建議我如何完成此操作？這裏是我的代碼：如何在離子2應用程序的側面導航面板菜單中設置圖標

export class MyApp { 
 
    @ViewChild(Nav) nav: Nav; 
 

 
rootPage: any = MysplashPage; 
 
    
 
private dashboardpage; 
 
private gradesubjectpage; 
 
private myhomepage; 
 
    
 
    
 

 
pages: Array<{title: string, component: any}>; 
 

 
    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) { 
 
    this.initializeApp(); 
 
    \t this.pages = [ 
 
     { title: 'Explore', component: HomePage }, 
 
     { title: 'Dashboard', component: DashboardPage } 
 
\t ]; 
 
    } 
 

 
    initializeApp() { 
 
    this.platform.ready().then(() => { 
 
     this.statusBar.styleDefault(); 
 
    // this.splashScreen.hide(); 
 
    }); 
 
    } 
 

 
    openPage(pages) { 
 

 
    if(pages.component == HomePage){ 
 
     this.nav.setRoot(HomePage); 
 
    } else { 
 
     this.nav.push(pages.component); 
 
    } 
 
\t 
 
    } 
 
}

這裏的html頁面我將與環的幫助下，我應該用不同的圖標在側邊導航面板中的菜單項來顯示它。

<ion-list> 
 
     <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
 
     <b>{{p.title}}</b> 
 
     </button> 
 
    </ion-list>

來源

2017-08-16 supriya chauhan

你會在每一個列表中添加一個圖標一樣，在這種情況下，由於該表內容從一個變量來了，在使用NG-你會在你的對象申報的圖標。

app.component.ts：

this.pages = [ 
    { title: 'Explore', component: HomePage, icon: 'home' }, //OR THE ICON YOU WANT 
    { title: 'Dashboard', component: DashboardPage, icon: 'clipboard' } 
    ]; 
}

而在你的HTML：

<ion-list> 
    <button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)"> 
    <b>{{p.title}}</b> <ion-icon item-right name="{{p.icon}}"></ion-icon> 
    <!-- item-right attribute on ion-icon will push the icon to the for right --> 
    </button> 
</ion-list>

檢查here所有可用的圖標。

希望這會有所幫助

來源

2017-08-16 17:57:12

如何在離子2應用程序的側面導航面板菜單中設置圖標

回答

相關問題