Ionic：当我导航到另一个页面时，如何从一个页面包含 header？

Question

我正在使用 Ionic 3，在我的主页上，我有以下代码。当我单击 searchMore 按钮时，它导航到一个新页面。我想在新页面上包含 h5 中的 "Cook With What is in My Pantry"。

  <ion-grid>
  <ion-row>
    <ion-col col-9>
      <h5 name="cookWith">Cook With What is in My Pantry</h5>
    </ion-col>
    <div class="applyMore">
      <ion-col col-3>
        <button (click)="searchMore()" ion-button clear icon-left>
          More
        <ion-icon name='arrow-forward'></ion-icon>
        </button>
      </ion-col>
    </div>
  </ion-row>
</ion-grid>

在它链接到的页面上，我有以下代码，我希望 h5 出现。

<h5 name="cookWith">{{cookWith}}</h5>

在我的 .TS 文件中，我有以下内容

来自首页

  export class HomePage {constructor(public navCtrl: NavController, 
  public navParams:          
  NavParams) {

   }

  /**
  *links filter button to FilterPage
  */

 recipeFilter(event, button) {
   this.navCtrl.push(FilterPage, {
   button: button
   });
   }

  searchMore(event, button) {
    this.navCtrl.push(RecipesearchPage, {
    });
    ;
   }
  }

它链接到的页面

export class RecipesearchPage {

 constructor(public navCtrl: NavController, public navParams: 
 NavParams) {   
 } 

 ionViewDidLoad() {
  console.log('ionViewDidLoad RecipesearchPage');
 }

 /**
 *on click, links from recipe card to individual recipe page
 */
 individualRecipe() {
  this.navCtrl.push(RecipePage);
  };

}

Answer 1

所以我认为你可以这样做。如果以后需要更改字符串，可以在构造函数中进行更改。我想如果它是静态的并且不会改变为什么不在两个地方都有它？

选项 #1：如果以后需要动态更新标签。

<ion-grid>
  <ion-row>
    <ion-col col-9>
      <h5>{{cookWith}}</h5>
    </ion-col>
    <div class="applyMore">
      <ion-col col-3>
        <button (click)="searchMore()" ion-button clear icon-left>
          More
          <ion-icon name='arrow-forward'></ion-icon>
        </button>
      </ion-col>
    </div>
  </ion-row>
</ion-grid>

在主组件的值声明中添加class:

export class HomePage {
  cookWith: string;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams
  ){
     this.cookWith = 'Cook With What is in My Pantry';
  }

  /**
   *links filter button to FilterPage
   */
   recipeFilter(event, button) {
      this.navCtrl.push(FilterPage, { 
         button: button
      });
   }

   searchMore(event, button) {
     this.navCtrl.push(RecipesearchPage, {
        cookWith: this.cookWith
     });
   }
}

那你在另一边捡起来：

export class RecipesearchPage {
  cookWith: string;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams
  ){
    this.cookWith = navParams.get('cookWith');
  } 

  ionViewDidLoad() {
    console.log('ionViewDidLoad RecipesearchPage');
  }

  /**
   *on click, links from recipe card to individual recipe page
   */
   individualRecipe() {
     this.navCtrl.push(RecipePage);
   };
 }

选项 #2：只需将 html 放在两个地方：

 <h5>Cook With What is in My Pantry</h5>

Answer 2

在 ionic/angular 的多个页面中重复使用相同 header 的最佳方法是通过 directive

Ionic：当我导航到另一个页面时，如何从一个页面包含 header？

Ionic: How do I include header from one page when I navigate to another page?

ionic3

angular

选项 #1：如果以后需要动态更新标签。

选项 #2：只需将 html 放在两个地方：