这就是我想要做的。
- 将组单选按钮放在 Ionic2 弹出菜单中。
- 这些选项实际上是控制内容要加载的 JSON 文件。
- 用户选择一个选项,关闭弹出框,页面中的内容将相应更新。
我不确定如何将值从 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';
弹出框组件:
@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*/
///
}