代码之家 › 专栏 › 技术社区 › supriya chauhan

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

navigation-drawer icons ionic2

supriya chauhan · 技术社区 · 7 年前

我正在尝试在ionic2应用程序的侧导航面板上设置图标,请建议我如何完成?

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();
   	this.pages = [
      { title: 'Explore', component: HomePage },
      { title: 'Dashboard', component: DashboardPage }
	  ];
  }

  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);
    }
	
  }
}

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

1 回复 | 直到 7 年前

Gabriel Barreto 7 年前

您将在每个列表中添加一个类似的图标,在这种情况下,因为列表内容来自一个变量,并在ng中使用,因为您将在对象中声明该图标。

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 对于所有可用的图标。

希望这有帮助

推荐文章

Ali Abdulaal · Ionic 2——如何在变量中放入大量JSON数据,并在没有延迟的情况下删除重复的数据?

7 年前

Simon · 错误:无法传输程序-ionic2

7 年前

Rafael de Castro · 离子存储不需要的更改

7 年前

Rafael de Castro · 离子型/角型2-在页面之间插入“中介体”。ts和提供商。ts

7 年前

Ke Vin · 如何在ionic 3中使用选项卡正确设置我的主应用程序的根目录?

7 年前

Uraquitan Matova Ura Kombat · 离子,角度-索引内的全局变量。其他ts页面调用的html

7 年前

Kumar · 在离子项目中内联显示信息图标

7 年前

StuartDTO · 如何在Ionic中打开组件

7 年前

jamesharvey · 如何使用*ngFor指令从Ionic 3(Cordova、Ionic 3、Angular 5)上的存储器中提取数据

7 年前

jamesharvey · 我怎样才能让谷歌地图在一个div内只占据50%的高度?(爱奥尼亚3号,科尔多瓦)

7 年前