Come riparare l'Evento membro dall'errore @ ionico / angolare in Ionic 5

Ho aggiornato da Ionic 4 a Ionic 5, ottenendo ora il seguente errore:

ERRORE in src / app / app.component.ts (4,10): errore TS2305: il modulo '"/ node_modules / @ ionic / angular / ionic-angular"' non ha membri esportati 'Events'.

La seguente riga di importazione sta causando il problema:

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

Come posso correggere un evento membro @ionic/angulardall'errore in Ionic 5?

angular ionic-framework ionic5

— Muhammad Omais
fonte

Ciao, sto affrontando lo stesso problema. E per me, sembra che Ionic 4 abbia eliminato gli eventi. Ho trovato questo: stackoverflow.com/questions/58265379/… Forse questo aiuta

— Ipad

ho lo stesso errore, sarei anche felice di trovare un semplice sostituto per quello. Non voglio andare per il redux nel mio caso.

— Fargho,

Anch'io sto ottenendo questo. Questo sembra un enorme cambiamento di rottura. È mai stato documentato dal team ionico? Se è così, mi piacerebbe leggerlo!

— Giovanni,

@Ipad, controlla la mia risposta.

— Shashank Agrawal,

@John è documentato nella documentazione sul cambio di rottura di Ionic. Per favore, controlla la mia risposta.

— Shashank Agrawal,

Risposte:

Eventsdal @ionic/angularpacchetto ha rimosso dal ionico 5. È possibile visualizzare i cambiamenti di rottura Ionic5 qui .

Come accennato nelle ultime modifiche, è necessario utilizzare Observables.

Ad esempio, è possibile creare il seguente servizio:

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

Ora puoi iscriverti a qualsiasi componente come 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);
        });
    }
}

Ora, devi solo emettere l'evento da qualche altro componente:

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

Questa è una soluzione / esempio o un'alternativa molto semplice Eventsma è possibile modificare ulteriormente il codice per renderlo un evento con spaziatura dei nomi con un argomento.

Ho scritto un blog su questo che può darti una soluzione completa in modo che con molto meno modifica del codice, puoi aggiornare la tua app.

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

— Shashank Agrawal
fonte

Gli eventi sono stati rimossi. Puoi fare il tuo servizio come un evento come il tuo usando osservabili e comportamento soggetto in modo da poter pubblicare su ovserable e iscriverti per ottenere il valore.

— Mostafa Harb
fonte