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

Question

我正在使用Ionic 3并在我的主页上，我有以下代码。当我单击searchMore按钮时，它会导航到新页面。我想在新页面的h5中加入“Cook With 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>

在主要组件类中添加值的声明：

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的多个页面中重用同一页眉的最佳方法是通过directive