Question

这是否可以创建包含选项卡的模态以及选择项目将数据传递到父视图？

我知道Tabs有自己的，单独的历史堆栈，所以如果不可能，那么像Tabs一样实现的最佳方式是什么？

使用父视图中的选项卡创建模式：

selectContractor() {        
    let contractorsModal = this.modalCtrl.create('VisitAddTabsPage', {routeId: this.routeId});
    contractorsModal.present();
    contractorsModal.onDidDismiss(data => {
        console.log(data);
    })
}

VisitAddTabsPage.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>

最近承包商标签（ nearest-contractors.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
}

Answer 1

是的，您可以使用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所携带的数据，打开模态的页面最终可以在模态关闭后获得数据。

Ionic 3如何使用Tab键关闭模态并将数据传递给父

1 个答案: