Ionic - 如何在侧面菜单项上添加图标？答案

【问题标题】：Ionic - How can I add icons on sidemenu items?Ionic - 如何在侧面菜单项上添加图标？
【发布时间】：2018-07-31 04:41:54
【问题描述】：

我是 ionic 2 的新手，我使用 ionic CLI 创建了一个侧边菜单应用程序，并且我有几个页面，但现在我想为每个菜单项添加一个不同的图标，我该怎么做？

这是我的 app.html：

<ion-menu [content]="content">
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

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

</ion-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

在我的 app.components.ts 中有这些页面：

// used for an example of ngFor and navigation
this.pages = [
  { title: 'Estatísticas', component: "EstatisticasPage"},
  { title: 'Registrar vendas', component: "RegistrarVendasPage" },
  { title: 'Listar vendas', component: "VendasPage" },
  { title: 'Produtos', component: "ProdutosPage" },
  { title: 'Funcionários', component: "FuncionariosPage" },
  { title: 'Clientes', component: "ClientesPage" },
];

【问题讨论】：

标签： ionic-framework

【解决方案1】：

您只需向pages 数组添加另一个属性，然后使用<ion-icon>。

this.pages = [
  { title: 'Estatísticas', component: "EstatisticasPage", icon: 'home' },
  ...
]

<button menuClose ion-item *ngFor="let p of pages" (click)="openPage(p)">
  {{p.title}}
  <ion-icon item-end [name]="p.icon">
</button>

【讨论】：

【解决方案2】：

@luisenrike 有一个很好的解决方案。只是添加到他的，不要忘记在app.component.ts中添加图标类型，否则可能会遇到错误。

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

【讨论】：