How to pass some text or paragraph from a page to another page

问题

The building name and the building address should pass into the next page dynamically at the top red corner which is the areaPage. I hope you guys takes time to answer this. thank you for your future answers and god bless

home.ts(project sites)

<ion-content>
<div class="banner">
  <p>Project Sites</p>
</div>
  <ion-content class="card-background-page">

  <ion-card>
  <img src="assets/imgs/2.JPG">
  <div class="card-title">Building Name</div>
  <div class="card-subtitle">Building Address</div>
  <div class="signin-btn">
    <button ion-button full (click)="AreaPage()">Visit</button>
  </div>
  </ion-card>
</ion-content>
</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AreaPage } from '../area/area';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

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

  }

  AreaPage(){
    console.log('AreaPage');
    this.navCtrl.push(AreaPage);

  }

}

We're not in the next page which is the areaPage. area.html

<ion-content>
  <div class="banner">
    <p style="font-size: 0.80em; padding-top: 5px; margin-bottom: 0%">   ??????????   </p>
    <p style="font-size: 0.45em; padding-bottom: 7px; margin-top: 0%">   ??????????  </p>
  </div>
<ion-content style="margin-top: -5%">
  <img src="assets/imgs/layout1.png">
  <page-form></page-form>

</ion-content>
</ion-content>

area.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-area',
  templateUrl: 'area.html',
})
export class AreaPage {


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

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

}

回答1:

Add data to your navigation in home.ts

AreaPage(){
    console.log('AreaPage');
    this.navCtrl.push(AreaPage, {
        name: "Name 123",
        address: "Address 123"
    });
}

Then your can red the date in the constructor of your area.ts

public name: string;
public address: string;

constructor(private navParams: NavParams) {
    this.name = navParams.get('name ');
    this.address = navParams.get('address');
}

Now you can simply use this vars in your html template.

<div class="banner">
    <p style="font-size: 0.80em; padding-top: 5px; margin-bottom: 0%"> {{name}} </p>
    <p style="font-size: 0.45em; padding-bottom: 7px; margin-top: 0%"> {{address}} </p>
</div>

Here is some further reading about NavParams.

来源：https://stackoverflow.com/questions/57993264/how-to-pass-some-text-or-paragraph-from-a-page-to-another-page

标签

angular

ionic3