ionic 4 - 如何检索传递给模态的数据

Question

根据 Ionic 4 文档，您可以通过 componentProps 传递数据属性。在 Ionic3 中，我可以使用 navParams 服务检索它。我如何在 Ionic 4 中执行此操作？

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }

Answer 1

您需要使用@Input() 装饰器。

async presentModal() {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: { value: 123 }
    });
    return await modal.present();
  }

分量：

@Component({
  selector: 'ModalPage',
  templateUrl: './ModalPage.component.html',
  styleUrls: [ './ModalPage.component.css' ]
})
export class ModalPage  {
  name = 'Angular';
  @Input() value: any;
}

Answer 2

Navparams 在 Ionic 4 Beta-15 中仍然有效

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

import { NavParams } from '@ionic/angular';

  export class ModalPage {
  public value = this.navParams.get('value');

  constructor(private navParams: NavParams) {}

}

获取从 ModaPage 到 Page1 的返回值：

Page1.ts

modal.onDidDismiss().then((data) => {
  console.log(data);
})

重要提示：

要在 Page1 中使用 ModalPage，您需要在 page1.module.ts 文件中导入 ModalPageModule 模块。

Answer 3

您只需将模态页面模块名称添加到 import:[ your -modal-module-page-name] 下的 app-module.ts 中。如果你想将模式调用到页面中，则无需调用页面模块

    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 {}

Answer 4

主页

异步呈现模态（urlm）{

const modal = await this.modalController.create({
  component: ShowmediaPage,
  componentProps: { url: urlm ,
  from:status},
});

return await modal.present();

}

ShowmediaPage

@Input() url: 字符串;

@Input() from:string;

ionic 4 - 如何检索传递给模态的数据

ionic 4 - how to retrieve data passed to a modal

ionic-framework

angular

ionic4