【问题标题】:Ionic 2 shared componentIonic 2 共享组件
【发布时间】:2017-12-31 17:52:46
【问题描述】:

我正在构建一个 ionic 2 项目,我想在页面之间共享标题和侧边菜单!有人可以帮忙吗?我已将侧边菜单添加到 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>

【问题讨论】:

  • 您的要求是什么?你想分享什么?
  • 我想与所有页面共享此菜单
  • 已共享。
  • 我在个人资料页面中制作了一个按钮来显示菜单,所以我需要制作一个标题或类似的东西将与所有页面共享,因为定义每个页面不是一个好习惯时间所有页面上的切换按钮?你明白我的意思吗?
  • 你想要那个按钮在所有页面上吗?

标签: ionic-framework menu components shared


【解决方案1】:

在您的情况下,您不需要创建共享组件。

这将以有效的方式为您工作。

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>

参考官方演示conference app

【讨论】:

【解决方案2】:

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

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

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-12-20
    • 2019-03-31
    • 2017-06-12
    • 1970-01-01
    • 1970-01-01
    • 2017-01-04
    • 2017-04-15
    • 2018-03-01
    相关资源
    最近更新 更多