[英]ionic 4 - how to retrieve data passed to a modal
According to the Ionic 4 docs, you can pass data via the componentProps property.根据 Ionic 4 文档,您可以通过 componentProps 属性传递数据。 In Ionic3 I can retrieve it with the navParams Service.
在 Ionic3 中,我可以使用 navParams 服务检索它。 How do I do it in Ionic 4?
我如何在 Ionic 4 中执行此操作?
async presentModal() {
const modal = await this.modalController.create({
component: ModalPage,
componentProps: { value: 123 }
});
return await modal.present();
}
You need to use @Input() decorator.您需要使用 @Input() 装饰器。
async presentModal() {
const modal = await this.modalController.create({
component: ModalPage,
componentProps: { value: 123 }
});
return await modal.present();
}
Component:零件:
@Component({
selector: 'ModalPage',
templateUrl: './ModalPage.component.html',
styleUrls: [ './ModalPage.component.css' ]
})
export class ModalPage {
name = 'Angular';
@Input() value: any;
}
Navparams still works in Ionic 4 Beta-15 Navparams 仍然适用于 Ionic 4 Beta-15
Page1.ts Page1.ts
import { ModalPage } from './modal.page';
async presentModal() {
const modal = await this.modalController.create({
component: ModalPage,
componentProps: { value: 123 }
});
//insert onDidDismiss() here
return await modal.present();
}
ModalPage.ts模态页面.ts
import { NavParams } from '@ionic/angular';
export class ModalPage {
public value = this.navParams.get('value');
constructor(private navParams: NavParams) {}
}
To get a returned value from the ModaPage to Page1:获取从 ModaPage 到 Page1 的返回值:
Page1.ts Page1.ts
modal.onDidDismiss().then((data) => {
console.log(data);
})
IMPORTANT:重要的:
ModalPage
inside Page1
you need to import ModalPageModule
module inside page1.module.ts
file.Page1
中使用ModalPage
,您需要在page1.module.ts
文件中导入ModalPageModule
模块。You just need to add your modal page module name into the app-module.ts
under import:[ your -modal-module-page-name]
.您只需将模态页面模块名称添加到
app-module.ts
下的import:[ your -modal-module-page-name]
中。 If you want to call a modal into a page there is no need to call into the page-module如果您想将模式调用到页面中,则无需调用页面模块
import { Component, OnInit } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { CountryCodePage } from '../country-code/country-code.page';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
constructor(public modalController: ModalController) { }
ngOnInit() {
}
openCountryModal(){
this.presentModal();
}
async presentModal() {
const modal = await this.modalController.create({
component: CountryCodePage,
componentProps:{"dataArr":{
FirstName:"chitranjan",
Lastname:"soni",
Ambition :"coding"
}}
});
return await modal.present();
}
}
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import { Component, OnInit ,Input } from '@angular/core';
import { NavParams } from '@ionic/angular';
@Component({
selector: 'app-country-code',
templateUrl: './country-code.page.html',
styleUrls: ['./country-code.page.scss'],
})
export class CountryCodePage implements OnInit {
@Input() dataArr: string;
constructor(private navParams: NavParams) {
console.log(JSON.stringify(navParams.get('dataArr')));
}
ngOnInit() {
}
}
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';
import { CountryCodePageModule } from './country-code/country-code.module';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,CountryCodePageModule,
HttpClientModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
homepage主页
async presentModal(urlm) {异步 presentModal(urlm) {
const modal = await this.modalController.create({
component: ShowmediaPage,
componentProps: { url: urlm ,
from:status},
});
return await modal.present();
} }
ShowmediaPage显示媒体页面
@Input() url: string; @Input() 网址:字符串;
@Input() from:string; @Input() 来自:字符串;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.