在 ionic 3 中打开新页面时按住 ion-header

Posted 2023-03-13

【中文标题】在 ionic 3 中打开新页面时按住 ion-header

【英文标题】：Hold ion-header when open new page in ionic 3

【发布时间】：2018-04-14 11:41:22

【问题描述】：

我想创建应用相同的图像

第一个页面我添加带有事件点击的按钮

 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 的标题栏。 当单击标题和内容中的按钮时，我如何自定义主页和 MyPage 中的 html 、 js 可以打开 mypage 并保留标题？ 请分享我您的解决方案或想法。 太感谢了！ 这是我的演示

my code

my demo

【问题讨论】：

你能在这里模拟一下你到目前为止所做的事情吗stackblitz.com

@Sampath 我在您的链接中添加了我的代码。你能帮我吗

【参考方案1】：

您不能将页眉从一个页面转移到另一个页面。如果您需要在另一个页面上使用它，那么您需要使用相同的代码，或者您可以为此创建一个component。

ion-toolbar 上没有persistent 的属性。但是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>

【讨论】：

把mypage改成modal或者component可以吗？因为如果为每个页面添加标题，当打开和关闭新页面时它会显示动画，我可以在这里看到错误。在android中我可以用replace fragment来做到这一点，但我不知道如何在ionic中做同样的事情

你不能。Modal 也是page。但它作为popup 工作。但所有其他都与Page 相同。 navigations 和 transitions 在 modal 上是不同的。 component 是一个可重用的 Angular 构建块。您不能将其用作离子页面。但是您可以将标题部分放在组件中，然后，您可以在任何 Ionic Page 上重复使用它。

如果您有错误，那么您需要找到解决方案。