如何在页面上应用动态内容和动态内容？离子 3 和角 4

Question

我正在开发一个 ionic 3 应用程序。

所以我已经有一个包含动态数据的页面（数据很好，即名称和页面）。如果您查看代码，您会注意到每个“childStuff”都有相同的“childPage”。我的问题是如何让每个“childStuff”确定“childPage”上显示的内容？

现实生活中的例子是这些“childStuff”中的每一个都是一个城市的名称，并且该城市有关于它的信息。对于每个“childStuff”的数据，“childPage”的布局完全相同。所以我想要的是当我点击（例如）迈阿密时，“childPage”显示“迈阿密，有 X 人住在这里。”但是当我点击 Cleveland 时，“childPage”会显示“Cleveland，XA number of people live here。”

所以基本上我希望父页面能够说“当点击 'childStuff(instance 1) 时在 'childPage' 上显示与 'childStuff(instance 1) 相关的信息”

这有意义吗？

打字稿 - HTML

import { Component } from '@angular/core';
import { Nav, Platform, NavController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { NewPage } from '../new/new';

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

export class HomePage {
  childStuff: Array<{name: string, childPage: any}>;

  constructor(public navCtrl: NavController) {
      this.childStuff= [
        {
          name: 'new',
          childPage: NewPage
        },{
          name: 'new2',
          childPage: NewPage
        },{
          name: 'new3',
          childPage: NewPage
        },{
          name: 'new4',
          childPage: NewPage
        },{
          name: 'new5',
          childPage: NewPage
        },{
          name: 'new6',
          childPage: NewPage
        },{
          name: 'new7',
          childPage: NewPage
        },{
          name: 'new8',
          childPage: NewPage
        }
      ];
  }

  goToNewPage(page) {
    //push another page onto the history stack
    //causing the nav controller to animate the new page in
    this.navCtrl.push(page.childPage);
  }

}

<div *ngFor="let c of childStuff" (click)="goToNewPage(c)">
 <a>
 <div>
 <p>{{c.name}}</p>
 </div>
 </a>
 </div>

Answer 1

基本上，基于组件的框架的美妙之处在于拥有大量可重用的组件。您不希望每个城市都有单独的组件。您只需拥有相同的 CityPage 并将参数传递给 navCtrl.push() 方法：

goToNewPage(params) {
    this.navCtrl.push(CityPage, params);
}

在 CityPage 上，您将处理输入参数并相应地构建您的视图。

import { NavParams } from 'ionic-angular';

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>City Page</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>I'm the other page!</ion-content>`
})
class CityPage {
  constructor(private navParams: NavParams) {
     let city = navParams.get('city');
     let population = navParams.get('population');
  }
}

这会有所帮助：https://ionicframework.com/docs/api/navigation/NavController/

更新 在您的父组件中，您可以存储参数：

this.childStuff= [
    {
      city: 'Miami',
      population: 500000
    },{
      city: 'Cleaveland',
      population: 40000
    }
  ];