ionic2
क्रियार्थ द्योतक

सरल मोडल

मोडल एक अस्थायी UI है जो आपके वर्तमान पृष्ठ के शीर्ष पर प्रदर्शित होता है। यह अक्सर लॉगिन, साइनअप, मौजूदा विकल्पों को संपादित करने और विकल्पों का चयन करने के लिए उपयोग किया जाता है।

आइए हम उपयोग किए गए तौर-तरीकों के साथ एक सरल उदाहरण देखें। शुरू करने के लिए हम एक आयनिक रिक्त परियोजना बना रहे हैं। आइए हम एक सरल मोडल बनाते हैं जो एक संदेश प्रदर्शित करता है और बटन क्लिक पर बाहर निकलता है। ऐसा करने के लिए पहले हम अपने मॉडल के लिए दृश्य बना रहे हैं।

Message.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Modal
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <h1>Modal Without Params is created successfully.</h1>
  <button full (click)="dismiss()"> Exit </button>
</ion-content>

Message.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/message/message.html',
})
export class MessagePage {
  viewCtrl;
  constructor(viewCtrl: ViewController) {
    this.viewCtrl = viewCtrl;
  }
  dismiss(){
    this.viewCtrl.dismiss();
  }
}

यह मोडल एक संदेश प्रदर्शित करता है। मोड नियंत्रकों को खारिज करने की विधि का उपयोग करके मोडल को बंद या "खारिज" किया जा सकता है।

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Modal Example
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <button full (click)="openModal()">ModalWithoutParams-Message</button>
</ion-content>

Home.ts

import { Component } from '@angular/core';
import { ModalController } from 'ionic-angular';
import {MessagePage} from '../message/message';
@Component({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  modalCtrl;
  data;
  constructor(modalCtrl: ModalController) {
    this.modalCtrl = modalCtrl;
    this.data = [{name: "aaa", email: "[email protected]", mobile: "1234567890", nickname: "zzz"},
      {name: "bbb", email: "[email protected]", mobile: "1234567890", nickname: "yyy"},
      {name: "ccc", email: "[email protected]", mobile: "1234567890", nickname: "xxx"}]
  }
  openModal() {
    let myModal = this.modalCtrl.create(MessagePage);
    myModal.present();
  }
}

अब हम अपना होम पेज बना रहे हैं जो ModalController और हमारे डेटा मॉडल MessagePage का आयात कर रहा है। ModalController की बनाने की विधि हमारे डेटा मॉडल MessagePage के लिए मोडल बनाती है जिसे चर myModal को नियंत्रित करने के लिए सहेजा जाता है। वर्तमान विधि हमारे वर्तमान पृष्ठ के शीर्ष पर मोडल को खोलती है।

खारिज करने पर पैरामीटर के साथ मॉडल:

अब हम जानते हैं कि मोडल कैसे बनाया जाता है। लेकिन क्या होगा अगर हम अपने होम पेज पर कुछ डेटा मोडल से पास करना चाहते हैं। ऐसा करने के लिए, हमें मोडल के साथ एक उदाहरण पर गौर करना चाहिए जैसे कि रजिस्टर्ड पेज पासिंग पैरामीटर पेरेंट पेज पर।

Register.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <ion-list>
    <ion-item>
      <ion-label>Name</ion-label>
      <ion-input type="text" [(ngModel)]="name"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="text" [(ngModel)]="email"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Mobile</ion-label>
      <ion-input type="number" [(ngModel)]="mobile"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Nickname</ion-label>
      <ion-input type="text" [(ngModel)]="nickname"></ion-input>
    </ion-item>
  </ion-list>
  <button full (click)="add()">Add</button>
</ion-content>

Register.ts

import { Component } from '@angular/core';
import { ViewController } from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/register/register.html',
})
export class ResisterPage {
  viewCtrl;
  name;
  email;
  mobile;
  nickname;
  constructor(viewCtrl: ViewController) {
    this.viewCtrl = viewCtrl;
    this.name = "";
    this.email = "";
    this.mobile = "";
    this.nickname = "";
  }
  dismiss(){
    this.viewCtrl.dismiss();
  }
  add(){
    let data = {"name": this.name, "email": this.email, "mobile": this.mobile, "nickname": this.nickname};
    this.viewCtrl.dismiss(data);
  }
}

रजिस्टर मोडल को उपयोगकर्ता द्वारा दर्ज किए गए मानों के साथ डेटा ऑब्जेक्ट मिलता है और मापदंडों को हमारे वर्तमान पृष्ठ पर देखने के लिए पारित कर दिया जाता है। अब पैरामीटर भेजे गए हैं।

तो हम होम पेज में मापदंडों को कैसे पुनः प्राप्त करने जा रहे हैं? ऐसा करने के लिए, हम होम पेज पर एक बटन बना रहे हैं और क्लिक पर रजिस्टर मोडल को कॉल करें। उपयोगकर्ता प्रदर्शित करने के लिए, हम एक सूची प्रदर्शित कर रहे हैं।

home.html

<ion-list>
  <ion-item *ngFor="let datum of data">
    <h1>{{datum.name}}</h1>
  </ion-item>
</ion-list>
<button full secondary (click)="openModalParams()">ModalWithParams-Register</button>

Home.ts

import {ResisterPage} from '../register/register';

  openModalParams(){
    let modalWithParams = this.modalCtrl.create(ResisterPage);
    modalWithParams.present();

    modalWithParams.onDidDismiss((result) =>{
      if(result){
        this.data.unshift(result);
      }
    });
  }

जब भी कोई मोडल बंद होता है, ViewController onDidDismiss पद्धति निष्पादित हो जाती है। यदि डेटा को मोडल से पैरामीटर के रूप में पारित किया जाता है, तो हम onDidDismiss पद्धति का उपयोग करके इसे पुनः प्राप्त कर सकते हैं। यहां उपयोगकर्ता द्वारा दर्ज किए गए डेटा को मौजूदा डेटा से जोड़ा जाता है। यदि कोई डेटा पैरामीटर के रूप में पारित नहीं किया जाता है, तो लौटाया गया मान शून्य होगा।

बनाने पर मापदंडों के साथ मॉडल:

एक मोडल के लिए पैरामीटर पास करना उसी तरह है जैसे हम एक नवकंट्रोलर के मूल्यों को कैसे पास करते हैं। ऐसा करने के लिए, हम सूची आइटम पर क्लिक करते समय और आवश्यक पैरामीटर बनाने के लिए दूसरे तर्क के रूप में बनाने के लिए एक सूची खोलने के लिए home.html में अपनी सूची बदल रहे हैं।

home.html

 <ion-list>
    <ion-item *ngFor="let datum of data" (click)="openModalwithNavParams(datum)">
      <h1>{{datum.name}}</h1>
    </ion-item>
  </ion-list>

Home.ts

import {EditProfilePage} from '../edit-profile/edit-profile';

  openModalwithNavParams(data){
    let modalWithNavParams = this.modalCtrl.create(EditProfilePage,{Data: data});
    modalWithNavParams.present();
  }

अन्य विचारों के समान, हम पिछले दृश्य से भेजे गए डेटा को पुनः प्राप्त करने के लिए NavParams का उपयोग करते हैं।

संपादित-Profile.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Login
    </ion-title>
    <ion-buttons start>
      <button (click)="dismiss()">
        <span primary showWhen="ios">Cancel</span>
        <ion-icon name="md-close" showWhen="android,windows"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <h2>Welcome {{name}}</h2>
  <ion-list>
    <ion-item>
      <ion-label>Email</ion-label>
      <ion-input type="text" value={{email}}></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Mobile</ion-label>
      <ion-input type="number" value={{mobile}}></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Nickname</ion-label>
      <ion-input type="text" value={{nickname}}></ion-input>
    </ion-item>
  </ion-list>
  <button full (click)="dismiss()">Close</button>
</ion-content>

संपादित-Profile.ts

import { Component } from '@angular/core';
import { ViewController, NavParams } from 'ionic-angular';
@Component({
  templateUrl: 'build/pages/edit-profile/edit-profile.html',
})
export class EditProfilePage {
  viewCtrl;
  navParams;
  data;
  name;
  email;
  mobile;
  nickname;
  constructor(viewCtrl: ViewController, navParams: NavParams) {
    this.viewCtrl = viewCtrl;
    this.navParams = navParams;
    this.data = this.navParams.get('Data');
    this.name = this.data.name;
    this.email = this.data.email;
    this.mobile = this.data.mobile;
    this.nickname = this.data.nickname;
    
  }
  dismiss(){
    this.viewCtrl.dismiss();
  }
}