如何在离子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>

答

你会在每一个列表中添加一个图标一样，在这种情况下，由于该表内容从一个变量来了，在使用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所有可用的图标。

希望这会有所帮助

如何在离子2应用程序的侧面导航面板菜单中设置图标

相关推荐