Ionic 2-在帶參數的頁面之間導航（空白應用）

Question

我有一個空白的ionic 2項目，並且有一個帶有列表的頁面。 當您單擊列表項目時，您應該看到該項目的詳細信息視圖。 這是我的列表文件：

list.html：

<ion-navbar *navbar>
  <ion-title>list</ion-title>
</ion-navbar>

<ion-content padding class="list">
    <ion-list>
        <ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.title}}</ion-item>
    </ion-list>
</ion-content>

list.js：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {ItemDetailPage} from '../item-detail/item-detail';

@Component({
  templateUrl: 'build/pages/list/list.html',
})
export class ListPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
      this.nav = nav;

      this.items = [
          {title: 'Hi1', description: 'whats up?'},
          {title: 'Hi2', description: 'whats up?'},
          {title: 'Hi3', description: 'whats up?'}
      ];
  }

  viewItem(){
      this.nav.push(ItemDetailPage, {
          item: item
      });
  }
}

這是我的詳細視圖文件：

detail-view.html：

<ion-navbar *navbar>
  <ion-title>{{title}}</ion-title>
</ion-navbar>

<ion-content padding class="item-detail">
    <ion-card>
        <ion-card-content>
            {{description}}
        </ion-card-content>

    </ion-card>  
</ion-content>

detail-view.js：

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

@Component({
  templateUrl: 'build/pages/item-detail/item-detail.html',
})
export class ItemDetailPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(navParams: NavParams) {
      this.navParams = navParams;

      this.title = this.navParams.get('item').title;
      this.description = this.navParams.get('item').description;
  }
}

當我使用“離子發球”時，會收到以下消息：

語法錯誤：C：/.../ app / pages / item-detail / item-detail.js：解析文件時出現意外令牌（18:23）：...

因此，我認為詳細信息視圖的構造函數無法以這種方式工作。 但是我找不到任何可以幫助我的東西。 我認為此解決方案已棄用，因為我發現的教程來自2015年。但是就像我說的那樣，我沒有發現有用的東西。 我的離子框架版本為2.0.0-beta.8

Answer 1

這里：

(click)="viewItem(item)"

您正在將該項目作為參數發送，但使用的是方法：

viewItem(){
  this.nav.push(ItemDetailPage, {
      item: item
  });
}

你不明白。 我認為您只需要像這樣將其包含在內，它就可以正常工作：

viewItem(item: any) {
  this.nav.push(ItemDetailPage, {
      item: item
  })
}