Передать значение Ionic2 popover ngModel и вызвать функцию в родительском компоненте Page?

Question

Вот что я пытаюсь сделать.

• Установка групповых переключателей в всплывающем меню Ionic2.
• Параметры фактически определяют, какой JSON-файл будет загружать содержимое.
• Пользователь выбирает опцию, закрывает всплывающее окно, контент будет обновляться соответственно на странице.

Я не уверен, как передать значение из Ionic2 Popover в его родительский компонент. Если я правильно понимаю, Popover Ionic2 является дочерним компонентом. Однако я не знаю, как пройти [(ngModel)] ценить

Я знаю, что это выглядит грязно здесь... хорошо, если только кто-то достаточно любезен, чтобы сделать простой пример того, как передать значение из PopOver на страницу...

Итак... все это в одном файле:

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

Компонент Popover:

@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

Нет необходимости в обслуживании, просто все усложняется..

Смотрите полный план здесь - https://plnkr.co/edit/s6lT1a?p=info

это звонящий, передайте обратный вызов...

 presentPopover(myEvent) {
    let popover = Popover.create(PopoverComponent,{
      cb: function(_data) {
        alert(JSON.stringify(_data))
      }
    });

    this.nav.present(popover, {
      ev: myEvent
    });
  }

в поповере...

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, Пожалуйста, взгляните на этот рабочий поршень.

Я видел, что вы используете 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 изменился И, наконец, в вашем HomePage:

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

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

С этим мы подписываемся HomePage к этому GlobalServiceпоэтому, когда глава изменится, мы будем замечены и справимся с этим, как захотим.