如何在Ionic工具栏上为所有页面添加按钮?

时间:2018-06-08 17:01:02

标签: angular cordova ionic-framework ionic3

在暂停代码中,我想在navbar项前面的menu处添加搜索图标:

<ion-menu [content]="content">
    <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>

<ion-buttons end>
  <button ion-button icon-only>
    <ion-icon name="search"></ion-icon>
  </button>
</ion-buttons>
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

但是这段代码无效。

1 个答案:

答案 0 :(得分:2)

首先<ion-nav>然后<ion-menu>,这样就不会被覆盖。并将所有内容放在app.html中:

<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

<ion-menu [content]="content">
    <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>

<ion-buttons end>
  <button ion-button icon-only>
    <ion-icon name="search"></ion-icon>
  </button>
</ion-buttons>