Kā nodot datus un saņemt atbildi Ionic 4 modālos?

Blogs

Kā nodot datus un saņemt atbildi Ionic 4 modālos?

Šajā Ionic 4 apmācībā mēs iemācīsimies izmantot modālo uznirstošo lietojumprogrammu Ionic 4 Angular lietojumprogrammā. Mēs arī uzzināsim, kā nodot datus un saņemt datu atbildi Ionic 4 modālos.

kanye west visu dienu zippy

Satura rādītājs

  • Ionic 4 vides iestatīšana
  • Izveidojiet jonu 4/leņķisko projektu
  • Datu nodošana modālajai lapai programmā Ionic 4
  • Izveidojiet modālo uznirstošo lapu
  • Saņemiet datus Ionic 4 modālā režīmā
  • Modāla atlaišana jonu 4
  • Tiek parādīts modeļa popover
  • Secinājums

Ionic 4 vides iestatīšana

Uz Izveidojiet modālus programmā Ionic 4 , mūsu datorā jābūt instalētai jaunākajai Node js, Ionic un Cordova versijai.

Lai sāktu darbu ar Node js, lejupielādējiet jaunāko Node versiju no šeit .

sudo npm install -g cordova ionic

Lai atjauninātu Ionic un Cordova uz jaunāko versiju, izmantojiet šādu komandu:

sudo npm update -g cordova ionic

Lūdzu, pārliecinieties, ka jums ir jābūt Xcode iestatīt savā mašīnā. Šajā apmācībā mēs izmantojam Visual Studio kodu; tomēr jūs varat izmantot jebkuru teksta redaktoru pēc jūsu izvēles.
Tagad mēs visi esam gatavi izveidot pavisam jaunu Ionic projektu, izpildiet nākamo soli.

Izveidojiet jonu 4/leņķisko projektu

Lai veidotu modālus lietotnē Ionic 4, mums no jauna jāģenerē jonu/leņķa pamata projekts. Palaidiet zemāk esošo komandu, lai izveidotu pavisam jaunu Ionic 4/Angular projektu.

ionic start ionic-modals-app --type=angular

Izvēlēsimies ideālu sākuma veidni!

Sākuma veidnes ir gatavas jonu lietotnes, kas ir komplektā ar visu nepieciešamo, lai izveidotu lietotni. Lai nākamreiz apietu šo uzvedni, piegādājiet veidni, otro argumentu jonu palaišanai.

? Starter template: tabs | A starting project with a simple tabbed interface sidemenu | A starting project with a side menu with navigation in the content area ❯ blank | A blank starter project my-first-app | An example application that builds a camera with gallery conference | A kitchen-sink application that shows off all Ionic has to offer

Pāriesim uz jonu modālu lietotnes projektu direktoriju.

cd ionic-modals-app

Tagad palaidiet lietotni Ionic 4, izmantojot tālāk norādītās komandas.

ionic serve ng run app:serve --host=localhost --port=8100

Tagad jūsu projekts tiks atvērts http: // localhost: 8100/home URL, varat skatīt savu jonisko/leņķisko projektu pārlūkprogrammas adreses joslā.

Datu nodošana modālajai lapai programmā Ionic 4

Pārsūtīsim datus uz modālu Ionic 4, izmantojot modalController.create () metodi. Lai sāktu modālo atvēršanu programmā Ionic, pievienojiet šādu kodu | _+_ | failu.

src/app/home/home.page.ts

Importējiet ModalController no “@Jonu/leņķis” , šis modulis palīdz izsaukt parastās Ionic 4. lapas. Pēc tam ievadiet ModalController konstruktorā. Izmantojiet metodi .create (), lai pārsūtītu datus uz modālā uznirstošo logu showModal () funkciju.

Izveidojiet modālo uznirstošo lapu

Šajā solī mēs projektā Ionic 4/Angular izveidosim regulāru modālu uznirstošo lapu. Terminālī ievadiet zemāk esošo komandu.

import { Component } from '@angular/core'; import { ModalController } from '@ionic/angular'; import { ModalPopupPage } from '../modal-popup/modal-popup.page'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { constructor(public modalController: ModalController) { } async showModal() { const modal = await this.modalController.create({ component: ModalPopupPage, componentProps: { 'name': 'Hello User' } }); return await modal.present(); } }

Importēt ModalPopup lapa | _+_ | un injicējiet iekšpusē deklarācijas un entryComponents masīvs.

ng generate page ModalPopup

Saņemiet datus Ionic 4 modālā režīmā

Lai iegūtu datus Ionic 4, mums ir jāimportē NavParams iekš ModalPopupPage un injicējiet to iekšpusē celtnieks() , izmantot | _+_ | metode datu atbildes saņemšanai pārlūkprogrammas konsolē.

Iet uz src/app/modal-popup.page.ts un pievienojiet tajā šādu kodu.

app.module.ts

Modāla atlaišana jonu 4

Lai pārtrauktu modālo, importējiet un injicējiet | _+_ | un definējiet closeModal () metodi un saistiet to ar jonu pogas HTML tagu.

Fināls | _+_ | failu.

import { ModalPopupPage } from './modal-popup/modal-popup.page'; @NgModule({ declarations: [ModalPopupPage], entryComponents: [ModalPopupPage], imports: [...], providers: [...], bootstrap: [...] }) export class AppModule { }

Zvaniet uz closeModal () metode HTML veidnē.

navParams.get()

Šeit ir pilns jonu modālās veidnes HTML kods. Pievienojiet kodu | _+_ | failu.

import { Component, Input } from '@angular/core'; import { NavParams } from '@ionic/angular'; @Component({ selector: 'app-modal-popup', templateUrl: './modal-popup.page.html', styleUrls: ['./modal-popup.page.scss'], }) export class ModalPopupPage { @Input() name: string; constructor( public navParams: NavParams ) { console.log(navParams.get('name')); } }

Tiek parādīts modeļa popover

Lai parādītu modeli, mums jāpievieno klikšķa notikums un jānokārto | _+_ | funkciju tajā. Dodieties uz | _+_ | veidni un pievienojiet tai šādu kodu.

ModalController

Secinājums

Visbeidzot, mēs esam pabeiguši apmācību par Ionic 4/Angular Modals. Šajā apmācībā mēs uzzinājām, kā nosūtīt datus uz modālā komponenta lapu otrādi, lai saņemtu datu atbildes modālā lapā. Iegūstiet pilnu šīs apmācības avota kodu vietnē git repo .

#Jonu #leņķis