備忘錄_20160105(定位)
修改
回首頁
程式 2020-03-20 03:36:29 1584646589 100
閱讀 IONIC 4+ 的心得 PART 11 - modal
閱讀 IONIC 4+ 的心得 PART 11 - modal
從 details 去呼叫 request (獨佔式對話框)
【app-routing.module.ts】
當一個 component 做成獨佔式對話框的話,
就請您把他從 routing 中移走。
const routes: Routes = [
/*
{
path: 'request',
loadChildren: () => import('./pages/request/request.module').then( m => m.RequestPageModule)
}
*/
];
【details.module.ts】
import { RequestPage } from './../request/request.page';
@NgModule
({
declarations: [RequestPage, ......],
entryComponents:[RequestPage]
})
【details.page.ts】
import { ModalController, ...... } from '@ionic/angular';
import { RequestPage } from './../request/request.page';
constructor(private modalCtrl:ModalController, ......) { }
async presentModal()
{
const modal=await this.modalCtrl.create
({
component:RequestPage,
componentProps:this.tour // 將 tour 物件送出去當作屬性
});
modal.present();
}
【request.page.ts】
import { NavParams } from '@ionic/angular';
import { Components } from '@ionic/core';
export class RequestPage implements OnInit {
tour:any={};
modal:Components.IonModal;
constructor(navParams:NavParams)
{
this.tour=navParams.data;
}
myCancel()
{
this.modal.dismiss();
}
}