Poponic中頁面的Ionic2觸發器功能

我目前正在學習使用Angular2和Ionic2開發，並且遇到一些問題。Poponic中頁面的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); 
;}

我酥料餅的模板：

<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>

如果有人可以幫忙，這將是非常感激。

來源

2017-04-11 Gaetane

我沒有發現問題或問題太微妙，所以讓我們使用ionic2而不是EventEmitter作弊並使用Events提供程序。因爲你能。

調整酥料餅的成分：

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

來源

2017-04-11 17:05:59 misha130

感謝您的建議。它還沒有工作，但我知道如果問題是點擊按鈕時沒有發出事件，或者頁面沒有收到它。你知道我在哪裏可以找到有關Ionic活動提供商的工作示例嗎？ – Gaetane

我已經實現活動提供從離子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

來源

2017-09-03 18:32:41 wilfredonoyola

Poponic中頁面的Ionic2觸發器功能

回答

相關問題