Cara memperbaiki Acara anggota dari @ ionic / kesalahan sudut di Ionic 5

Saya telah meningkatkan dari Ionic 4 ke Ionic 5, sekarang mendapatkan kesalahan berikut:

GALAT di src / app / app.component.ts (4,10): error TS2305: Modul '"/ node_modules / @ ionic / angular / ionic-angular"' tidak memiliki 'Acara' anggota diekspor.

Garis impor berikut menyebabkan masalah:

import { Events, Platform } from '@ionic/angular';

Bagaimana saya bisa memperbaiki Acara anggota dari @ionic/angularkesalahan di Ionic 5?

angular ionic-framework ionic5

— Muhammad Omais
sumber

Hai, saya menghadapi masalah yang sama. Dan bagi saya, sepertinya Ionic 4 menghapus acara tersebut. Saya menemukan ini: stackoverflow.com/questions/58265379/... Mungkin ini membantu

— Ipad

saya memiliki kesalahan yang sama, juga akan senang menemukan pengganti yang sederhana untuk itu. Tidak ingin menggunakan redux dalam kasus saya.

— Fargho

Saya juga mendapatkan ini. Sepertinya ini adalah perubahan besar yang menghancurkan. Apakah itu pernah didokumentasikan oleh tim Ionic? Jika demikian, saya ingin membacanya!

— John

@Ipad silakan periksa jawaban saya.

— Shashank Agrawal

@ John didokumentasikan dalam dokumentasi perubahan Ionic yang melanggar. Silakan periksa jawaban saya.

— Shashank Agrawal

Jawaban:

Eventsdari @ionic/angularpaket dihapus dari Ionic 5. Anda dapat melihat perubahan pada Ionic5 di sini .

Seperti yang disebutkan dalam perubahan yang melanggar, Anda harus menggunakan Observables.

Misalnya, Anda dapat membuat layanan berikut:

import {Injectable} from '@angular/core';
import {Subject} from 'rxjs';

@Injectable({
    providedIn: 'root'
})
export class GlobalFooService {

    private fooSubject = new Subject<any>();

    publishSomeData(data: any) {
        this.fooSubject.next(data);
    }

    getObservable(): Subject<any> {
        return this.fooSubject;
    }
}

Sekarang, Anda dapat berlangganan komponen apa pun seperti app.component.ts:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})
export class AppComponent {

    constructor(private globalFooService: GlobalFooService) {
        this.initializeApp();
    }

    initializeApp() {
        // other code

        this.globalFooService.getObservable().subscribe((data) => {
            console.log('Data received', data);
        });
    }
}

Sekarang, Anda hanya perlu memancarkan acara dari beberapa komponen lain:

@Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss']
})
export class HomePage {

    constructor(private globalFooService: GlobalFooService) {
    }

    onSomeButtonClick() {
        this.globalFooService.publishSomeData({
            foo: 'bar'
        });
    }
}

Ini adalah solusi / contoh atau alternatif yang sangat sederhana, Eventstetapi Anda dapat mengubah kode Anda lebih jauh untuk menjadikannya acara yang diberi nama dengan topik.

Saya telah menulis sebuah blog tentang ini yang dapat memberikan Anda solusi berfitur lengkap sehingga dengan perubahan kode yang sangat sedikit, Anda dapat meningkatkan aplikasi Anda.

https://medium.com/wizpanda/dealing-with-breaking-change-in-ionic-5-db3ba711dfcd

— Shashank Agrawal
sumber

Acara telah dihapus. Anda dapat melakukan layanan Anda sendiri sebagai acara Anda sendiri menggunakan yang bisa diamati, dan perilaku subjek sehingga Anda bisa menerbitkan ke ovserable dan berlangganan untuk mendapatkan nilai.

— Mostafa Harb
sumber