So beheben Sie das Element Ereignis aus @ Ionen- / Winkelfehler in Ionic 5

9

Ich habe ein Upgrade von Ionic 4 auf Ionic 5 durchgeführt und erhalte jetzt den folgenden Fehler:

FEHLER in src / app / app.component.ts (4,10): Fehler TS2305: Modul '"/ node_modules / @ ionic / angle / ionic-angle"' hat kein exportiertes Mitglied 'Events'.

Die folgende Importzeile verursacht das Problem:

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

Wie kann ich das Member-Ereignis aufgrund eines @ionic/angularFehlers in Ionic 5 beheben ?

Muhammad Omais
quelle
Hallo, ich stehe vor dem gleichen Problem. Und für mich scheint Ionic 4 die Ereignisse gelöscht zu haben. Ich habe folgendes gefunden: stackoverflow.com/questions/58265379/… Vielleicht hilft das
Ipad
1
Ich habe den gleichen Fehler, würde mich auch freuen, einen einfachen Ersatz dafür zu finden. Ich möchte in meinem Fall keinen Redux machen.
Fargho
Ich verstehe das auch. Dies scheint eine massive, bahnbrechende Veränderung zu sein. Wurde das jemals vom Ionic-Team dokumentiert? Wenn ja, würde ich das gerne lesen!
John
@ IPad bitte überprüfen Sie meine Antwort.
Shashank Agrawal
@ John es ist in der bahnbrechenden Änderungsdokumentation des Ionic dokumentiert. Bitte überprüfen Sie meine Antwort.
Shashank Agrawal

Antworten:

15

Eventsaus dem @ionic/angularPaket wurde aus Ionic 5 entfernt. Sie können die bahnbrechenden Änderungen in Ionic5 hier sehen .

Wie in den wichtigsten Änderungen erwähnt, sollten Sie verwenden Observables.

Sie können beispielsweise den folgenden Dienst erstellen:

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

Jetzt können Sie jede Komponente wie abonnieren 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);
        });
    }
}

Jetzt müssen Sie nur noch das Ereignis von einer anderen Komponente ausgeben:

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

Dies ist eine sehr einfache Lösung / ein Beispiel oder eine Alternative der Events aber Sie können Ihren Code weiter optimieren, um ihn zu einem Ereignis mit Namespace und einem Thema zu machen.

Ich habe einen Blog dazu geschrieben, der Ihnen eine umfassende Lösung bietet, mit der Sie Ihre App mit sehr wenig Codeänderung aktualisieren können.

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

Shashank Agrawal
quelle
0

Ereignisse wurden entfernt. Sie können Ihren eigenen Dienst als Ereignis wie Ihren eigenen mithilfe von Observablen und Betreffverhalten ausführen, sodass Sie im Ovserable veröffentlichen und abonnieren können, um den Wert zu erhalten.

Mostafa Harb
quelle