如何将一些文本或段落从一个页面传递到另一个页面 [英] How to pass some text or paragraph from a page to another page

问题描述

建筑物名称和建筑物地址应在顶部红色角处动态传递到下一页，即areaPage.我希望你们花时间来回答这个问题.谢谢你未来的答案，上帝保佑

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(项目站点)

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

  }

}

我们不在下一页，即 areaPage.area.html

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

}

推荐答案

在home.ts中添加数据到你的导航

Add data to your navigation in home.ts

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

然后你可以在你的 area.ts

public name: string;
public address: string;

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

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

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>

这里有一些关于 NavParams.

这篇关于如何将一些文本或段落从一个页面传递到另一个页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！