備忘錄_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();
  }
}