Ionic 2 共享组件

Question

我正在构建一个 ionic 2 项目，我想在页面之间共享 header 和侧边菜单！有人可以帮忙吗？我已将侧边菜单添加到 app.html 文件：

<ion-menu [content]="content">
    <ion-header>
        <ion-toolbar>
            <ion-title>Menu</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <button ion-item (click)="openPage(homePage)">
        Home
      </button>
            <button ion-item (click)="openPage(friendsPage)">
        Friends
      </button>
            <button ion-item (click)="openPage(eventsPage)">
        Events
      </button>
            <button ion-item (click)="closeMenu()">
        Close Menu
      </button>
        </ion-list>
    </ion-content>
</ion-menu>

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

Answer 1

这不是个好主意，但你可以在 app.html 中试试这个除了菜单

<ion-header>
  <ion-title>{{title}}</ion-title>
</ion-header>
<ion-nav [root]="rootPage"></ion-nav>

Answer 2

对于您的情况，您不需要创建共享组件。

这将以高效的方式为您服务。

page.ts

   <ion-header>

      <ion-navbar>

        <button ion-button menuToggle>

          <ion-icon name="menu"></ion-icon>

        </button>

        <ion-title>About</ion-title>

        <ion-buttons end>

          <button ion-button icon-only (click)="presentPopover($event)">

            <ion-icon name="more"></ion-icon>

          </button>

        </ion-buttons>

  </ion-navbar>

</ion-header>

参考官方demo conference app

Ionic 2 共享组件

Ionic 2 shared component

ionic-framework

menu

components

shared