![](/img/trans.png)
[英]scrolling in ionic2 is disabled when I navigate from a popover to a page
[英]Pass Ionic2 popover ngModel value to and call function in parent Page component?
這就是我想要做的。
我不確定如何將值從Ionic2 Popover傳遞到其父組件。 如果我正確理解Ionic2的Popover是子組件。 但是我不知道如何傳遞[(ngModel)]
值。
我知道這里看起來很雜亂……好吧,只要有人能做一個簡單的示例說明如何將價值從PopOver傳遞給Page ...
所以...全部放在一個文件中:
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*/
///
}
無需服務,只會使事情變得復雜。
在此處查看完整的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彈出菜單中。
這些選項實際上是控制內容要加載的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
,因此當章節更改時,我們將被注意到,我們可以根據需要進行處理。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.