如何将一些文本或段落从一个页面传递到另一个页面

Question

大楼名称和大楼地址要动态传入下一页，在上红角即areaPage。我希望你们花时间回答这个问题。感谢您未来的回答，上帝保佑

home.ts（项目站点）

<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);

  }

}

我们不在下一页 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');
  }

}

Answer 1

将数据添加到 home.ts

中的导航

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

然后你可以在 area.ts

的 constructor 中将日期涂红

public name: string;
public address: string;

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

现在您可以在 html 模板中简单地使用这个变量。

<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>

这里是关于 NavParams 的进一步阅读。

如何将一些文本或段落从一个页面传递到另一个页面

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

ionic3

angular