在离子3中打开新页面时保持离子头

时间:2017-11-02 03:12:45

标签: html angular typescript ionic-framework ionic3

我想要创建app相同的图像 enter image description here

在第一页我添加按钮并点击事件

 openHomePage(){
    this.navCtrl.push(HomePage);
  }

在主页中,我用html添加标题和按钮

<ion-header>
  <ion-toolbar persistent="true">
    <ion-label>Photogenic Map</ion-label>
    <ion-buttons end>
      <button ion-button icon-only color="royal" (click)="MyPage()">
        <ion-icon name="person"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <button ion-button (click)="MyPage()">Open Mypage</button>
</ion-content>

在mypage.js中我添加了

 MyPage(){
    this.navCtrl.push(MyPage);
  }

但是当打开MyPage时,它不会从HomePage中保存标题栏。 我如何在HomePage和MyPage中自定义html,js,当在标题和内容中单击按钮时可以打开mypage一个hold header? 请与我分享您的解决方案或想法。 非常感谢! 这是我的演示

my code

my demo

1 个答案:

答案 0 :(得分:0)

您无法将标题从一个页面转移到另一个页面。如果您需要在另一个页面上使用该标题,则需要使用相同的代码,或者您可以为此创建component

persistent上没有ion-toolbar的属性。但Menu bar上有persistent个属性。

stackblitz

的mypage.html

  <ion-header>
    <ion-toolbar>
        <ion-label>Photogenic Map</ion-label>
        <ion-buttons end>
            <button ion-button icon-only color="royal" (click)="MyPage()">
                <ion-icon name="person"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
 <h5>My Page</h5>
</ion-content>