将 Ionic2 popover ngModel 值传递给父页面组件并调用函数？

Question

这是我正在尝试做的事情。

将组单选按钮放入 Ionic2 弹出菜单中。
选项实际上是控制内容是哪个JSON文件即将加载。
用户select一个选项，关闭弹窗，内容会更新相应地在页面中。

我不确定如何将值从 Ionic2 Popover 传递到它的父组件。如果我理解正确，Ionic2 的 Popover 是一个子组件。但是我不知道如何将 [(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;
    };


};

这里还有一个Class，页面：

@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

Here's what I am trying to do.

Putting group radio buttons in the Ionic2 popover menu.

The options are actually controling which JSON file the content is going to load.

User select an option, close the popover, content will update accordingly in the page.

通过使用 共享服务 来处理弹出页面和 HomePage 之间的通信，您可以轻松实现这一目标。请看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 已经改变了。最后，在您的 HomePage:

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

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

因此，我们将 HomePage 订阅到 GlobalService，因此当章节更改时，我们会被注意到，我们可以根据需要进行处理。

Answer 2

不需要服务，只会让事情变得复杂..

在此处查看完整的 plunkr - 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();
}

将 Ionic2 popover ngModel 值传递给父页面组件并调用函数？

Pass Ionic2 popover ngModel value to and call function in parent Page component?

popover

typescript

ionic2

angular2-ngmodel

angular