親ページコンポーネントのIonic2 popover ngModel値を渡して関数を呼び出しますか？

Question

ここに私がしようとしていることがあります。

• Ionic2ポップオーバーメニューにグループラジオボタンを配置します。
• オプションは実際にはコンテンツがどのJSONファイルを読み込むかを制御しています（ ）。
• ユーザーがオプションを選択し、ポップオーバーを閉じると、コンテンツはページ内でそれに応じて を更新します。

Ionic2 Popoverの値を親コンポーネントに渡す方法がわかりません。私が正しく理解していれば、Ionic2のPopoverは子コンポーネントです。しかし、私はどのように[(ngModel)]値を渡すか分からない。

私も場合だけ誰かの親切ポップオーバーからページに値を渡す方法の簡単な例を作るために...それはここに乱雑に見えます知っている...

だから... ...このすべて1つのファイルに：

import {Component, Injectable, Input, Output, EventEmitter} from '@angular/core'; 
import {ViewController, NavController, Popover, Content, Events, NavParams} from 'ionic-angular'; 
import {CardService} from '../../providers/card-service/card-service'; 
import {LangService} from '../../providers/lang-service/lang-service'; 
import {GlobalService} from '../../providers/global-service'; 

ポップオーバーコンポーネント：

@Component({template: ` 
    <ion-list radio-group [(ngModel)]="selected" (ionChange)="loadc(selected)"> 

     <ion-item *ngFor="let chapter of menuArray"> 
      <ion-label>{{chapter.ctitle}}</ion-label> 
<ion-radio value="{{chapter.cchap}}" ></ion-radio> 
     </ion-item> 
    </ion-list> 

     `, 
    providers: [CardService, LangService, GlobalService], 
directives: [LangService] 
}) 

@Injectable() 
export class ChapterService{ 
private chpselected : any; 
private menuArray: any; 
    constructor(
    private viewCtrl: ViewController, 
    private navController: NavController, 
    public cardService: CardService, 
    public langService: LangService, 
    public globalService: GlobalService 

    ) { 
     this.menuArray = [ 
    { 
       id: 0, 
       cchap: '01', 
       ctitle: 'One', 
     }, 
    { 
       id: 1, 
       cchap: '02', 
       ctitle: 'Two', 
     }, 
    { 
       id: 2, 
       cchap: '03', 
       ctitle: 'Three', 
     }, 
]; 
     /// 
this.chpselected = this.menuArray[0]; 

     /// 
    }; 

    close() { 
    this.viewCtrl.dismiss(); 
    } 

///------------------------------- 
    Here I triggers an even when clicking the radio buttons in the popover. I want to call the loadCards() function in the HomePage class below so it returns what is selected and load the correct JSON in the DOM. However I do not how to pass this loadc() value to loadCards(). 
///------------------------------- 

    loadc(x){ 
    console.log(x); 
     this.globalService.nowchap = x; 
    }; 


}; 

別のクラスここでは、ページ：

@Component({ 
    templateUrl: 'build/pages/home/home.html', 
    providers: [CardService, LangService, ChapterService, HomePage, GlobalService], 
directives: [LangService] 
}) 

@Injectable() 
export class HomePage { 
/// 
public cards; 
public viewmode : any; 
    constructor(
    private navController: NavController, 
    public cardService: CardService, 
    public langService: LangService, 
    public globalService: GlobalService 
    //public chapterService: ChapterService 
    ){ 



    this.viewmode ="read"; 
     this.loadCards(); 
    }; 

    /* POPOVER*/ 
    presentPopover(myEvent) { 
    let popover = Popover.create(ChapterService); 
    this.navController.present(popover, { 
     ev: myEvent 
    }); 
    } 

/* Contents are loading here */ 
    public loadCards(x){ 
    console.log("this chp is "+x); 
    this.cardService.load(x) 
    .then(data => { 
     this.cards = data; 
    }); 

    } 

/* LOAD CARDS ENDED*/  
/// 
} 

Answer 1

サービスを必要とせず、物事を複雑にします。

ここに完全plunkrを参照してください - それは解決する方法を示すことplunkerを更新

constructor(private params: NavParams. /* removed rest for purpose of demo */) { 
    this.callback = this.params.get('cb') 
} 

public loadc(x) { 

    this.callback(x) 

    // Close the popover 
    this.close(); 
} 

Answer 2

これは私がやろうとしていることです。

Ionic2のポップオーバーメニューにグループラジオボタンを配置する。

オプションは、コンテンツがロードされるJSONファイルを実際に制御しています。

ユーザーがオプションを選択して、ポップオーバーを閉じると、コンテンツがページに応じて更新されます。

あなたが簡単にポップオーバーのページとあなたのHomePageの間の通信を処理するために共有サービスを使用していることをachiveすることができます。 this workin plunkerをご覧ください。

私はので、私はそれがこのように動作させるために小さな変更を提案あなたはglobalServiceを使用している見てきました：

import {Injectable} from '@angular/core'; 
import {Platform} from 'ionic-angular/index'; 
import {Observable} from 'rxjs/Observable'; 

@Injectable() 
export class GlobalService { 

    // Your properties... 

    public getChapterObserver: any; 
    public getChapter: any; 

    constructor(...){ 
    // Your code... 

    // I'm adding an observer so the HomePage can subscribe to it 
    this.getChapterObserver = null; 
    this.getChapter = Observable.create(observer => { 
     this.getChapterObserver = observer; 
    }); 

    } 

    // Method executed when selecting a radio from the popover 
    public selectChapter(chapter : any) { 
    this.getChapterObserver.next(chapter); 
    } 

} 

次に、あなたのPopoverPageに：

public loadc(x) { 
    // You can call your globalService like this 
    //this.globalService.selectChapter(this.menuArray[this.selected]); 

    // O by simply doing 
    this.globalService.selectChapter(x); 

    // Close the popover 
    this.close(); 
} 

だから今、私たちはselectChapterが変更されたことをGoogleサービスに伝えています。そして最後に、あなたのHomePageに：それと

constructor(private nav: NavController, private globalService: GlobalService) { 

    // We subscribe to the selectChapter event 
    this.globalService.getChapter.subscribe((selectedChapter) => { 
     this.selectedChapter = selectedChapter; 
    }); 
} 

、我々は章の変化は、私たちが気づいたことになるだろうと私たちは私たちが望むようことを扱うことができるようにする場合、HomePageそのGlobalServiceに加入しています。