كيفية التصريح واستخدام الوسائط في أيوني v4

لقد لاحظت أن الأسئلة حول الإعلان واستخدام الوسائط في Ionic v4 مع Angular غالباً ما تنبثق ، لذلك اعتقدت أنني سوف أصف بإيجاز كيف حللت هذا الموضوع في تطبيقي المحمول Fluster.

خلق مشروط

تعد الوسائط مكونًا ولم يتغير التعليق التوضيحي الخاص به حقًا مقارنةً بـ Ionic v3.

استيراد {Component} من '@ angular / core' ؛
@مكون({
    templateUrl: 'date-picker.html' ،
    styleUrls: ['./date-picker.scss'] ،
    محدد: "منتقي تاريخ التطبيق"
})
فئة التصدير DatePickerModal {
}

ملاحظة: إذا كنت تستخدم صفحة أمر CLI الأيونية لإنشاء الصفحة الخاصة بك ، لا تنسَ إزالة إدخالها التلقائي في توجيه التطبيق الخاص بك (app-routing-module.ts) لأن صفحات الوسائط ليست كذلك جزء من الملاحة. شكرا لساندرو سكالكو على هذه المدخلات القيمة

الإعلان عن وحدة الوسائط

ما التغيير ربما هو إعلان وحدة الوسائط. في الإصدار Ionic v3 ، تمت إعادة تشغيل الوسائط بمساعدة التعليق التوضيحيIonicPage () ، الذي لم يعد موجودًا في الإصدار Ionic v4. لذلك ، أخبرنا الوحدة النمطية الخاصة بنا بأنه يجب تحميل الوسائط الخاصة بنا بشكل حتمي ، ويمكن تحقيق ذلك من خلال إعلانها كعنصر إدخال في وحدتها.

استيراد {NgModule} من '@ angular / core' ؛
استيراد {IonicModule} من '@ الأيونية / الزاوي' ؛
استيراد {CommonModule} من '@ angular / common' ؛
// مكون المشروط في الفصل السابق
استيراد {DatePickerModal} من './date-picker' ؛
NgModule ({
     التصريحات:
       DatePickerModal
     ]،
     الواردات: [
       IonicModule،
       CommonModule
     ]،
     دخولالمكونات: [
       DatePickerModal
     ]
})
فئة التصدير DatePickerModalModule {}

تحميل كسول

قد تسأل نفسك ، هل هذه الوسائط كسول؟ الإجابة على هذا هي واحدة من كلماتي الألمانية المفضلة: jein ، وهي تقلص ja (= نعم) و nein (= لا).

يتم تحميل الوسائط كسول ، ولكن لن يتم تحميلها عند فتحها ، كما قد تفعل ، ولكن بدلاً من ذلك عندما يتم تحميل الوحدة النمطية ، حيث يتم استخدام الوحدة النمطية للمودم.

لمزيد من المعلومات حول هذا الموضوع بالذات ، يمكنك زيارة والمشاركة في موضوع المنتدى الأيوني التالي (راجع للشغل. أنا هناك reedrichards): https://forum.ionicframework.com/t/ionic-4-lazy-loading-and- شرطية

باستخدام الوسائط

أول شيء يتعين علينا القيام به من أجل استخدام مشروطنا هو استيراده في الوحدة النمطية للصفحة أو المكون الذي سنستخدمه فيه.

استيراد {NgModule} من '@ angular / core' ؛
استيراد {CommonModule} من '@ angular / common' ؛
استيراد {IonicModule} من '@ الأيونية / الزاوي' ؛
// وحدة الوسائط في الفصل السابق
استيراد {DatePickerModalModule} من '../../../../modals/core/date-picker/date-picker.module'؛
NgModule ({
    التصريحات:
        NewAdStepAvailabilityComponent
    ]،
    الواردات: [
      IonicModule،
      CommonModule،
      DatePickerModalModule
    ]،
    الصادرات: [
      NewAdStepAvailabilityComponent
    ]
})
فئة التصدير NewAdStepAvailableModule {}

ملاحظة: حول التحميل البطيء وهذا المثال بالذات ، يتم تحميل الوسائط في نفس الوقت الذي يتم فيه تحميل الوحدة النمطية NewAdStepAvailableModule على التوالي ، في متصفحنا ، سنكون قادرين على ملاحظة أن كود جافا سكريبت للشرط يتم تحميله في نفس الوقت الذي يتم فيه تحميل javascript رمز هذه الوحدة الخاصة.

استدعاء المعلمات مشروط وتمرير

سؤال آخر غالبًا ما ينبثق هو "كيفية تمرير المعلمات واستعادة النتيجة عند استخدام الوسائط في Ionic v4".

كما في Ionic v3 ، نستخدم ModalController لإنشاء مشروط والتفاعل معه. توفر وحدة التحكم هذه طريقة إنشاء تسمح لنا بتمرير المعلمات (المحددة في المثال التالي مع componentProps) وحدث onDidDismiss الذي سيتيح لنا الاستماع إلى إجراء إغلاق الوسائط من أجل الحصول على النتيجة.

متزامن openModal () {
    const modal: HTMLIonModalElement =
       ننتظر this.modalController.create ({
          المكون: DatePickerModal ،
          componentProps: {
             المعلمة: صحيح ،
             otherPamameter: تاريخ جديد ()
          }
    })؛
     
    modal.onDidDismiss (). ثم ((التفاصيل: OverlayEventDetail) => {
       إذا (التفاصيل! == فارغة) {
         console.log ('النتيجة:' ، detail.data) ؛
       }
    })؛
    
    ننتظر modal.present () ؛
}

الحصول على المعلمات في مشروط وإغلاق مشروط نتيجة

في مشروطنا ، يمكن استخدام موفر NavParams لقراءة المعلمات التي حددناها أعلاه عندما أنشأنا المشروط.

أخيرًا ، يمكن إنجاز إغلاق المشروط وتمرير النتيجة مرة أخرى باستخدام ModalController.

استيراد {Component} من '@ angular / core' ؛
استيراد {ModalController، NavParams} من '@ ionic / angular'؛
@مكون({
    templateUrl: 'date-picker.html' ،
    styleUrls: ['./date-picker.scss'] ،
    محدد: "منتقي تاريخ التطبيق"
})
فئة التصدير DatePickerModal {
    
    myParameter: منطقية؛
    myOtherParameter: التاريخ ؛
    منشئ (modalController الخاص: ModalController ،
                navParams الخاص: NavParams) {
    }
    ionViewWillEnter () {
      this.myParameter = this.navParams.get ('aParameter')؛
      this.myOtherParameter = this.navParams.get ('otherParameter')؛
    }
    غير متزامن myDismiss () {
      نتيجة const: تاريخ = تاريخ جديد () ؛
      
      ننتظر this.modalController.dismiss (نتيجة) ؛
    }
}

ملاحظة: في هذا المثال ، استخدمت منطقية وتواريخ للمعلمات والنتيجة ، ولكن قد تكون هذه أيضًا أي أنواع أخرى أو حتى كائنًا مخصصًا.

الكرز على الكعكة

يعمل بالضبط نفس الشيء مع بوبوفيرس

إلى ما لا نهاية وما بعدها

ديفيد