Comment réparer l'événement membre à partir d'une erreur @ ionique / angulaire dans Ionic 5

J'ai mis à niveau Ionic 4 vers Ionic 5, obtenant maintenant l'erreur suivante:

ERREUR dans src / app / app.component.ts (4,10): erreur TS2305: le module '"/ node_modules / @ ionic / angular / ionic-angular"' n'a aucun membre exporté 'Events'.

La ligne d'importation suivante est à l'origine du problème:

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

Comment puis-je réparer l'événement membre à partir d'une @ionic/angularerreur dans Ionic 5?

angular ionic-framework ionic5

— Muhammad Omais
source

Salut, je suis confronté au même problème. Et pour moi, il semble que Ionic 4 a supprimé les événements. J'ai trouvé ceci: stackoverflow.com/questions/58265379/… Peut-être que cela aide

— Ipad

j'ai la même erreur, serait également heureux de trouver un simple remplacement pour cela. Je ne veux pas opter pour redux dans mon cas.

— Fargho

Moi aussi, je comprends cela. Cela semble être un changement massif et révolutionnaire. Cela a-t-il été documenté par l'équipe Ionic? Si oui, j'aimerais lire ça!

— John

@Ipad, veuillez vérifier ma réponse.

— Shashank Agrawal

@John est documenté dans la documentation de changement de rupture de l'Ionic. Veuillez vérifier ma réponse.

— Shashank Agrawal

Réponses:

Eventsdu @ionic/angularpackage a été supprimé de Ionic 5. Vous pouvez voir les changements de rupture dans Ionic5 ici .

Comme cela est mentionné dans les changements de rupture, vous devez utiliser Observables.

Par exemple, vous pouvez créer le service suivant:

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

Maintenant, vous pouvez vous abonner à n'importe quel composant comme 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);
        });
    }
}

Maintenant, il vous suffit d'émettre l'événement à partir d'un autre composant:

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

C'est une solution / un exemple très simple ou une alternative à la Eventsmais vous pouvez affiner votre code pour en faire un événement à espace de noms avec un sujet.

J'ai écrit un blog à ce sujet qui peut vous donner une solution complète afin qu'avec très peu de changement de code, vous puissiez mettre à jour votre application.

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

— Shashank Agrawal
source

Les événements ont été supprimés. Vous pouvez faire votre propre service en tant qu'événement comme le vôtre en utilisant des observables et un comportement de sujet afin de pouvoir publier sur l'ovserable et vous abonner pour obtenir la valeur.

— Mostafa Harb
source