Modal彈出框
2020-10-15 本文已影响0人
BUTIMHERE
根據官網的步驟,在傳值時,在Modal頁面使用@Input接收,似乎接收不到,於是使用NavParams來接收,如下:
import {NavParams,ModalController} from '@ionic/angular';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {
constructor(public nav:NavParams,
private modalController: ModalController) {
console.log(nav.data);
}
在關閉頁面回傳值時,可用ModalController ,也可以用NavParams:
doClose(){
var p={
'value':123,
'text':'猜猜看'
}
this.nav.data.modal.dismiss(p);
// this.modalController.dismiss(p);
}
在開啓模態框的寫法中加入 const {data}
async showModal(){
const modal = await this.modalController.create({
component: LoginComponent,
cssClass: 'my-custom-class',
componentProps: {
'firstName': 'Douglas',
'lastName': 'Adams',
'middleInitial': 'N'
}
});
await modal.present();
const { data } = await modal.onWillDismiss();
console.log(data);
}