Popover中页面的Ionic2触发函数

Question

我目前正在学习使用 Angular2 和 Ionic2 进行开发，但遇到了一些问题。

我有一个显示地图的主页。在这个页面上，我有一个按钮，它显示一个带有项目列表的弹出窗口。当用户点击一个项目时，它应该从页面组件触发一个函数来在地图上显示该项目，但我不知道该怎么做。

我尝试在 Popover 中使用事件发射器，但我一定是在某个地方犯了错误，导致主页从未接收到该事件。

以下是我的代码的相关部分：

import { Component, Output, EventEmitter  } from '@angular/core';
import { OnInit } from '@angular/core';

import { NavParams, ViewController } from 'ionic-angular';

import { ShareService } from '../../../app/service/share.service';
import { FavoriService } from '../../../app/service/favori.service';
import { Favori } from '../../../app/classes/favori';
import { Utilisateur } from '../../../app/classes/utilisateur';



@Component({
  templateUrl: 'popover-favori.html',
  providers: [FavoriService]
})

export class PopoverFavori implements OnInit{

  @Output() selectFav: EventEmitter<string> = new EventEmitter<string>();

  constructor(public navParams: NavParams, 
          public viewCtrl: ViewController,
          private favoriService: FavoriService,
          private shareService: ShareService) {}


  listeFavoris: Favori[] = this.shareService.userFavs;
  user: Utilisateur = this.shareService.currentUser;
  selectedFavori: Favori;

  ngOnInit() {
      if (this.navParams.data) {
        this.listeFavoris = this.navParams.data.listeFavori;

      }
  }

selectFavori(favori) {
  this.selectedFavori = favori;
  this.selectFav.emit(favori.nom_point);
;}

我的 Popover 模板：

<h2>Favoris</h2>
<ion-list>
  <ion-item-sliding *ngFor="let favori of listeFavoris" >
    <ion-item>
      <h3><ion-icon name="arrow-back"></ion-icon> {{ favori.nom_point }}</h3>
    </ion-item>
    <ion-item-options side="right">
      <button ion-button color="primary" (click)="selectFavori(favori)">
        <ion-icon name="eye"></ion-icon>
      </button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

我的页面组件

import { Component, Input, AfterViewInit, ViewChild, OnInit  } from '@angular/core';

import { NavController, NavParams, Platform, ViewController, PopoverController } from 'ionic-angular';
import { FavoriService } from '../../app/service/favori.service';
import { AlertsFavoriService } from '../../app/service/alertsFavori.service';
import { ShareService } from '../../app/service/share.service';
import { UtilisateurService } from '../../app/service/utilisateur.service';
import { Utilisateur } from '../../app/classes/utilisateur';
import { Favori } from '../../app/classes/favori';
import { PopoverFavori } from './popover/popover-favori';


@Component({
  selector: 'page-carte',
  templateUrl: 'carte.html',
  providers: [
    FavoriService
    ]
})
export class CartePage implements OnInit {


  constructor(
    private navCtrl: NavController,
    private popoverCtrl: PopoverController, 
    pprivate navParams: NavParams, 
    private utilisateurService: UtilisateurService,
    private favoriService: FavoriService,
    private shareService: ShareService) { 

  }

   reponseFavoris: Favori[];
   reponseAlertsFavori: AlertsFavori[];
   user = this.shareService.currentUser;

  presentPopoverFavori(ev) {

    let popoverFavori = this.popoverCtrl.create(PopoverFavori, {
      listeFavori : this.reponseFavoris,

        });

    popoverFavori.present({
      ev: ev
    });
  }

 selectedFavoriName: string;

    onFavChange(event) {
      this.selectedFavoriName = event;
      this.getItineraireFavori(this.selectedFavoriName, this.shareService.currentUser.utilisateurId);
    }

页面模板：

<sebm-google-map> //map stuff
</sebm-google-map>
<button ion-fab (click)="presentPopoverFavori($event)" (selectFav)="onFavChange($event)"><ion-icon name="star"></ion-icon></button>

如果有人能提供帮助，将不胜感激。

Answer 1

我没有发现问题或问题太微妙，所以让我们作弊并使用 ionic2 中的事件提供程序而不是 EventEmitter。因为你可以。

调整弹窗组件：

  constructor(public navParams: NavParams, 
          public viewCtrl: ViewController,
          private favoriService: FavoriService,
          private shareService: ShareService,
          private events:Events) {}

  selectFavori(favori) {
    this.selectedFavori = favori;
    this.events.publish('favori:selected',favori.nom_point);
  }

然后在页面的构造函数中

constructor(
    private navCtrl: NavController,
    private popoverCtrl: PopoverController, 
    pprivate navParams: NavParams, 
    private utilisateurService: UtilisateurService,
    private favoriService: FavoriService,
    private shareService: ShareService,
    private events:Events) { 
     this.events.subscribe('favori:selected', onFavChange);
  }

Answer 2

我已经从 ionic 2 中实现了事件提供程序。这工作正常。

 import { Events } from 'ionic-angular';

// first page (publish an event when a user is created)
constructor(public events: Events) {}
createUser(user) {
  console.log('User created!')
  this.events.publish('user:created', user, Date.now());
}


// second page (listen for the user created event after function is called)
constructor(public events: Events) {
  events.subscribe('user:created', (user, time) => {
    // user and time are the same arguments passed in `events.publish(user, time)`
    console.log('Welcome', user, 'at', time);
  });
}

离子文档：https://ionicframework.com/docs/api/util/Events/

源代码：https://github.com/ionic-team/ionic/tree/master/demos/src/events

Answer 3

您可以在不使用 Events 的情况下处理此问题，而是将回调作为参数传递：

我的-popover.ts

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

@Component()
export class MyPopoverComponent {

  @Input()
  text:string = null;

  constructor(protected navParams:NavParams) {
    this.text = this.navParams.get("text");
  }

  onClicked(event:any) {
    this.navParams.get('clicked')(this.text);
  }
}

我的-popover.html

<button ion-button (click)="onClicked($event)">{{text}}</button>

我的-page.ts

let popover = this.popoverController.create(MyPopoverComponent, {
  text: "My Popover",
  clicked:(text:string) => {
    console.log(text);
  }
});
popover.present();

Popover中页面的Ionic2触发函数

Ionic2 trigger function of a page in a Popover

angular

ionic2

popover