这是否可以创建包含选项卡的模式以及何时选择项目将数据传递给父视图？
我知道 Tabs 有自己的、单独的历史堆栈，所以如果不可能实现像 Tabs-looking 方式那样的最佳方法是什么？
从父视图使用选项卡创建模态：
selectContractor() {
let contractorsModal = this.modalCtrl.create('VisitAddTabsPage', {routeId: this.routeId});
contractorsModal.present();
contractorsModal.onDidDismiss(data => {
console.log(data);
})
}
访问AddTabsPage.ts
@Component({
selector: 'page-visit-add-tabs',
templateUrl: 'visit-add-tabs.html'
})
@IonicPage()
export class VisitAddTabsPage {
ownContractorsRoot = 'OwnContractorsPage'
closestContractorsRoot = 'ClosestContractorsPage'
allContractorsRoot = 'AllContractorsPage'
constructor(public navCtrl: NavController,
public navParams: NavParams,
public viewCtrl: ViewController) {
}
}
访问-添加-tabs.html
<ion-tabs tabsPlacement="top" selectedIndex="1">
<ion-tab [root]="ownContractorsRoot" tabTitle="Moi" tabUrlPath="own" tabIcon="star"></ion-tab>
<ion-tab [root]="closestContractorsRoot" tabTitle="W pobliżu" tabUrlPath="closest" tabIcon="locate"></ion-tab>
<ion-tab [root]="allContractorsRoot" tabTitle="Wszyscy" tabUrlPath="all" tabIcon="contacts"></ion-tab>
</ion-tabs>
最近的承包商选项卡（最近的承包商.ts）
handleSelectedContractor(data) {
console.log(this.navCtrl);
console.log(this.appCtrl.getRootNav());
//this.viewCtrl.dismiss(data); <-- HOW TO DISMISS MODAL (and TABS) AND PASS DATA
}
是的，您可以使用Events做到这一点。
你总是可以发出一个事件，携带你想要的任何数据，从任何 DOM 元素到它的任何父 dom 元素。
所以从子页面做这样的事情：
import { EventEmitter, Output } from '@angular/core';
@Component({
...
})
export class ChildPage {
@Output() tabGotClosed = new EventEmitter();
let data: any;
...
notifyPickupConfirmed() {
this.tabGotClosed.emit(data);
}
}
然后在父页面的模板中，您可以像处理其他任何事件一样捕获事件：
<ion-content (tabGotClosed)="onTabGotClosed($event)">
这样，打开模态的页面最终可以在模态关闭后通过查看事件携带的数据来获得数据event.detail.tabGotClosed。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句