时间戳

首页 > 解决方案 > 如何将模态添加到 Ionic 4 中的选项卡？

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

问题描述

我正在关注本教程：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 不再存在。它完全被模态及其内容所取代。

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

标签： javascriptjavaandroidtypescriptionic-framework

解决方案

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

1-从'../prd-modal/prd-modal.module'中删除导入{PrdModalPageModule}；来自tab2.module.ts

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

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

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

5-仍然在您的选项卡路由器文件中添加

{
    path: 'prdModalPage',
    component: PrdModalPage
}

到路线数组

推荐阅读