Question

我有一个空白的离子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
      });
  }
}

这是我的详细视图文件：

细节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>

细节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年开始的。但就像我说的那样，我没有找到一些有用的东西。我的Ionic Framework版本是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
  })
}

离子2 - 带参数的页面之间的导航（空白应用程序）

1 个答案: