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);
})

重要提示：

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

Answer 3

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

    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

主页

异步presentModal(urlm) {

public string sha256(NSData data)
        {
            using (SHA256 mySHA256 = SHA256.Create())
            {
                byte[] bytes = data.ToArray();
                byte[] hashvalue = mySHA256.ComputeHash(bytes);
                NSData d = NSData.FromArray(hashvalue);
                return d.GetBase64EncodedString(NSDataBase64EncodingOptions.SixtyFourCharacterLineLength);
           }
         }

}

ShowmediaPage

@Input() url: 字符串;

@Input() from:string;

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

4 个答案: