如何将模态添加到 Ionic 4 中的选项卡？答案

【问题标题】：How to add modal to tabs in Ionic 4?如何将模态添加到 Ionic 4 中的选项卡？
【发布时间】：2019-08-28 15:52:31
【问题描述】：

我正在关注本教程：https://www.freakyjolly.com/ionic-4-how-to-use-ionic-modal-popovers-and-pass-data-and-receive-response/

这就是我所做的。

1) 新建页面“prd-modal.page”

ionic g page prd-modal

2) 然后在 tab2.module.ts 中：

import { PrdModalPageModule } from '../prd-modal/prd-modal.module';
@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    PrdModalPageModule,
    RouterModule.forChild([{ path: '', component: Tab2Page }]),
  ],
  declarations: [Tab2Page]
})

3) 点击标记时调用模态

addMarker(){
..
        this.map.addMarker(markerOptions).then(marker => {
            marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe((data) => {
                console.log("daata"+data);
                alert(data);
                this.openModal();
            });     
        });
}

但是，当我加载我的应用程序时，我的整个选项卡 2 已经位于选项卡 2 内容的顶部（我在选项卡 2 上有一张地图）。我尝试调试它，我的整个选项卡 2 被模态替换..意味着我的选项卡 2 不再存在。它完全被模态及其内容所取代。

我真的不知道我哪里出错了。非常感谢任何帮助。

【问题讨论】：

标签： javascript java android typescript ionic-framework

【解决方案1】：

我遇到了同样的问题，你就是这样解决的：

1- 从 tab2.module.ts

中删除 import { PrdModalPageModule } from '../prd-modal/prd-modal.module';

2- 仍在 tab2.module.ts 中添加 import { PrdModalPage } from '../prd-modal/prd-modal.page'; 到 tab2.module.ts

3- 仍在 tab2.module.ts 中将 PrdModalPage 添加到声明数组中

4- 在您的 tabs 路由器文件 中添加 import { PrdModalPage } from '../prd-modal/prd-modal.page';

5- 仍然在您的 tabs 路由器文件 中添加

{
    path: 'prdModalPage',
    component: PrdModalPage
}

到路由数组

【讨论】：