在ionic2中将项目单击从一个页面传递到另一个页面的变量答案

【问题标题】：pass variable on item click from one page to another in ionic2在ionic2中将项目单击从一个页面传递到另一个页面的变量
【发布时间】：2017-11-17 15:55:09
【问题描述】：

我正在使用 ionic2，并且我有一个静态项目列表 (ion-item)。

当我单击一个项目时，我需要将一个变量（在本例中为 wcyear）传递到第二个页面。问题是，如果我打印到控制台我传递的变量（wcyear）我得到未定义。

注意：如果我将 wcyear 替换为 home.ts（即year:"helloworld"）中的常量字符串，那么我会在控制台中看到“helloworld”。

这让我觉得我的 home.html 中有错误，但我看不到它。

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic 2 app
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-list>
  <ion-item let wcyear="2014" (click)="goToYear(wcyear)">
    <ion-avatar item-left>
      <img src="img/2014.png">
    </ion-avatar>
    <h2>2014</h2>
    <h3>some text</h3>
  </ion-item>
  <ion-item let wcyear="2010" (click)="goToYear(wcyear)">
    <ion-avatar item-left>
      <img src="img/2010.png">
    </ion-avatar>
    <h2>2010</h2>
    <h3>some text</h3>
  </ion-item>
  <ion-item let wcyear="2006" (click)="goToYear(wcyear)">
    <ion-avatar item-left>
      <img src="img/2006.png">
    </ion-avatar>
    <h2>2006</h2>
    <h3>some text</h3>
  </ion-item>
  <ion-item let wcyear="2002" (click)="goToYear(wcyear)">
    <ion-avatar item-left>
      <img src="img/2002.png">
    </ion-avatar>
    <h2>2002</h2>
    <h3>some text</h3>
  </ion-item>
</ion-list>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {YearDashboardPage} from '../year-dashboard/year-dashboard';

@Component({
  templateUrl: 'build/pages/home/home.html'
})

export class HomePage {
  constructor(public navCtrl: NavController) {
    this.navCtrl = navCtrl;
  }

  goToYear(wcyear){
    this.navCtrl.push(YearDashboardPage, {
      year: wcyear,
    });
  }

}

year-dashboard.ts

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


@Component({
  templateUrl: 'build/pages/year-dashboard/year-dashboard.html',
})
export class YearDashboardPage {

  selectedYear
  constructor(private navCtrl: NavController, private navParams: NavParams) {
     console.log(navParams.get('year'));  // I get undefined
  }

}

【问题讨论】：

这里的 wcyear (click)="goToYear(wcyear)" 是什么？你从哪里得到 wcyear ？尝试使用let-wcyear

标签： angular ionic-framework

【解决方案1】：

代替

console.log(navParams.get('year'));

使用

console.log(this.navParams.get('year'));..

【讨论】：