Question

我正在使用离子3应用程序。

所以我已经拥有一个动态数据页面（数据拉得很好，即名称和页面）。如果您查看代码，您会注意到每个＆＃34; childStuff＆＃34;有相同的＆＃34; childPage＆＃34;。我的问题是如何获得每个＆＃34; childStuff＆＃34;确定＆＃34; childPage＆＃34;？

上显示的内容

一个真实的例子就是这些＆＃34; childStuff＆＃34;是一个城市的名称，该城市有关于它的信息。＆＃34; childPage＆＃34;对于每个＆＃34; childStuff＆＃34;的数据，布局完全相同。所以我想要的是当我点击（例如）Miami，＆＃34; childPage＆＃34;节目＆＃34;迈阿密，X人住在这里。＆＃34;但是当我点击克利夫兰时，＆＃34; childPage＆＃34;节目＆＃34;克利夫兰，XA人数居住在这里。＆＃34;

所以基本上我希望父页面能够说＆＃34;当点击childStuff（实例1）时，显示有关＆＃39; childStuff（实例1）的信息。 childPage＆＃39;＆＃34;

这有意义吗？

打字稿 - HTML

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

基本上，基于组件的框架的优点是拥有大量可重用的组件。您不希望每个城市都有单独的组件。您只需拥有相同的CityPage，只需将params传递给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
    }
  ];

如何在页面上应用包含动态内容的动态内容？离子3＆amp;角4

1 个答案: