Ionic2 AngularJS2 - NavController推送上一页

Question

简介

我正在创建离子移动应用程序。现在，我正在尝试创建一个主 - 细节关系，在那里我可以看到事件。当我点击一个活动时，我希望看到所有参与者。我已经有了这个工作，虽然它有点bug。

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

问题

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

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

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

当我单击一个事件两次时会发生这种情况，请注意，在网络活动中，它只会再次加载1，而不会再次加载event.html。

当我选择不同的事件时会发生这种情况。请注意，在网络中，它会加载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

当使用Ionic2时，selector会被@Component错误地跟踪。使用此功能时，它会加载页面但可能会等待，直到调用selector。哪个不会发生。

删除selector解决了我的问题。