Ionic AngularJS 2——NavController 推送上一页

Question

简介

我正在创建一个离子移动应用程序。现在我正在尝试创建一个可以查看事件的主从关系。当我点击一个事件时，我想看到所有参与者。我已经开始工作了，尽管它有点问题。

很抱歉问题很长，但我不知道问题出在哪里，所以我发布了一个非常详细的问题

问题

当我点击我的事件（具有 (click) 属性）时，我的应用程序将选择一个事件（它显示在开发人员视图的网络选项卡中 - chrome），它会加载我的网页（它还显示在开发人员视图的网络选项卡中 - chrome）。

但是网页没有显示。它只是加载。这是因为当我第一次单击按钮时，我的 NavController 推送当前页面 (EvenementenPage)。但是当它被推送时，它会保存信息，然后可以继续到详细信息页面。如下图所示：

注意：这是 evenementen.html -- 它加载 event.html 和 1（JSON 对象）但不显示它

这是当我点击一个事件两次时发生的情况，注意网络 activity 它只会再次加载 1，不会再次加载 event.html。

这就是我 select 一个 不同的 事件时发生的情况。请注意，在网络中它加载 3，但显示 1 的内容（我猜是因为 event.html 没有再次加载）。他们有不同的名字和出生日期。

代码

evenementen.html -- (click)

<ion-header> 
  <ion-navbar>
    <button menuToggle>
    <ion-icon name='menu'></ion-icon>
    </button>
    <ion-title light>Quintor Evenementen</ion-title>
  </ion-navbar>

</ion-header>

<ion-content class="search" padding>
 <ion-list>
    <ion-item *ngFor="let event of evenementen"   (click)='selectEvent(event.id)'>
      <ion-thumbnail item-left>
        <img src="img/quintor.png">
      </ion-thumbnail>
      <h2 [innerText]="event.titel" primary></h2>
      <p>Aantal deelnemers: {{event.deelnemers}}</p><p><ion-icon name='clock'></ion-icon> 29 August 2017</p>
      <ion-icon item-right
  name='arrow-dropright-circle'></ion-icon>
    </ion-item>
  </ion-list>
</ion-content>

evenementen.ts -- selectEvent()

import { Component } from '@angular/core';
import {Observable} from 'rxjs/Observable';
import { NavController } from 'ionic-angular';
import { Http } from '@angular/http';
import { Inject } from '@angular/core';
import { EventDetailComponent } from '../event-detail/event';
/*
  Class for Evenementen Overzicht.
*/
@Component({
  templateUrl: 'build/pages/evenementen/evenementen.html',
})
export class EvenementenPage {
public http;
public evenementen;
public evenement:any;

  constructor(private navCtrl: NavController, @Inject(Http) httpService) {
    this.http = httpService;
    this.evenementen = [];
    this.getEvenementen();
  }

  getEvenementen(){
   this.http.get('http://localhost:8080/evenementen').subscribe((response) => {
     this.evenementen = (response.json());
   });
  }

  selectEvent(id : number){
    this.http.get('http://localhost:8080/evenementen/'+id).subscribe(res =>{
      this.evenement = res.json();
      this.goToEventDetail(this.evenement);
    });
  }

  goToEventDetail(eventParam){

    this.navCtrl.push(EventDetailComponent
    , {
      event: eventParam
    });
    this.evenement= null;
  }

}

event.html -- 详情页

<ion-content>
    <h2>tile</h2>
    <h1> YASS </h1>
    <ion-list>
        <ion-item *ngFor="let deelnemer of eventObj.alleDeelnemers">
            <h1>{{deelnemer.naam}}</h1>
            <p>{{deelnemer.geboortedatum}}</p>
        </ion-item>
    </ion-list>
    <button (click)="goBack()">Go back</button>
</ion-content>

event.ts -- 详情页

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

@Component({
    selector: 'event-detail',
    templateUrl: 'build/pages/event-detail/event.html'
})

export class EventDetailComponent {
    public eventObj:any;

    constructor(private navCtrl : NavController, public navParams : NavParams) {
         this.eventObj = navParams.get("event");
    }
    goBack(){
        this.navCtrl.pop();
    }

}

Answer 1

原来 selector 在使用 Ionic2 时被 @Component 窃听了。使用此函数时，它会加载页面，但可能会等到 selector 被调用。这不会发生。

删除 selector 解决了我的问题。

Ionic AngularJS 2——NavController 推送上一页

Ionic2 AngularJS2 -- NavController pushes previous page

ionic-framework

ionic2

angular

简介

问题

代码

event.ts -- 详情页