Ionic 2 - Навигация между страницами с параметрами (пустое приложение)

У меня есть пустой проект ionic 2 и есть страница со списком. Когда вы нажимаете на элемент списка, вы должны увидеть подробное представление элемента. Вот мои файлы списка:

список.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>

список.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;
  }
}

Когда я использую «ionic serve», я получаю следующее сообщение:

SyntaxError: C:/.../app/pages/item-detail/item-detail.js: Неожиданный токен (18:23) при разборе файла: ...

Поэтому я думаю, что конструктор подробного представления не работает таким образом. Но я нигде не нашел то, что могло бы мне помочь. Я думаю, что это решение устарело, потому что учебник, который я нашел, датирован 2015 годом. Но, как я уже сказал, я не нашел в нем ничего полезного. Моя версия Ionic Framework — 2.0.0-beta.8.


typescript javascript angular ionic3 ionic2
person Nono    schedule 14.06.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Здесь:

(click)="viewItem(item)"

Вы отправляете элемент как параметр, но в методе:

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

Вы не понимаете. Я думаю, вам просто нужно включить его как такой параметр, и он должен работать нормально:

viewItem(item: any) {
  this.nav.push(ItemDetailPage, {
      item: item
  })
}
person sebaferreras    schedule 14.06.2016
comment
Вы правы, я забыл об этом. Но я все еще получаю ту же синтаксическую ошибку в конструкторе detail-view.js - person Nono; 14.06.2016
comment
Вы также можете проверить это замечательный учебник, чтобы увидеть, как должен выполняться этот рабочий процесс master-detail. - person sebaferreras; 14.06.2016
comment
И, возможно, этот стартовый проект для Ionic с навигацией по боковому меню тоже может вам помочь. - person sebaferreras; 14.06.2016