Question

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

我有一个显示地图的主页面。在这个页面上，我有一个显示Popover的按钮，其中包含一个项目列表。当用户点击某个项目时，它应该从页面组件触发一个功能以在地图上显示该项目，但我不知道该怎么做。

我尝试在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

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

my-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);
  }
}

my-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();

Answer 2

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

调整popover组件：

cd /Volumes/ ; tar cf - SOURCE/  | tee \
>( cd /Volumes/dest1 ; tar xf - ) \
>( cd /Volumes/dest2 ; tar xf - ) \
> /dev/null

然后在页面的构造函数中

destinationList=/Volumes/dest1 /Volumes/dest2
cd /Volumes/Untitled/ ; tar cf - SOURCE/  | tee \
# for item in destinationList
# do
#     add this code ">( cd $item ; tar xf - )"
# done
> /dev/null

Answer 3

我已经实现了离子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);
  });
}

Ionic Doc：https://ionicframework.com/docs/api/util/Events/

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

Ionic2触发Popover页面的功能

3 个答案: