Como corrigir evento membro a partir de erro iônico / angular no Ionic 5

Atualizei do Ionic 4 para o Ionic 5, agora com o seguinte erro:

ERRO no src / app / app.component.ts (4,10): erro TS2305: O módulo '"/ node_modules / @ ionic / angular / ionic-angular"' não possui membros exportados 'Eventos'.

A seguinte linha de importação está causando o problema:

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

Como posso corrigir o @ionic/angularerro Event do membro no Ionic 5?

angular ionic-framework ionic5

— Muhammad Omais
fonte

Oi, estou enfrentando o mesmo problema. E para mim, parece que o Ionic 4 excluiu os eventos. Encontrei isto: stackoverflow.com/questions/58265379/… Talvez isso ajude

— Ipad

Eu tenho o mesmo erro, também ficaria feliz em encontrar um substituto simples para isso. Não quero ir para redux no meu caso.

— Fargho

Eu também estou entendendo isso. Parece uma grande mudança, que quebra. Isso já foi documentado pela equipe jônica? Se sim, eu gostaria de ler isso!

— John

@ IPad, por favor, verifique minha resposta.

— Shashank Agrawal

O @John está documentado na documentação de mudança de quebra do Ionic. Por favor, verifique minha resposta.

— Shashank Agrawal

Respostas:

Eventsdo @ionic/angularpacote foi removido do Ionic 5. Você pode ver as alterações mais recentes no Ionic5 aqui .

Como é mencionado nas mudanças mais recentes, você deve usar Observables.

Por exemplo, você pode criar o seguinte serviço:

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

Agora, você pode se inscrever em qualquer componente como 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);
        });
    }
}

Agora, você só precisa emitir o evento de algum outro 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'
        });
    }
}

Esta é uma solução / exemplo ou alternativa muito simples do, Eventsmas você pode ajustar ainda mais seu código para torná-lo um evento no espaço de nomes com um tópico.

Eu escrevi um blog sobre isso, que pode oferecer uma solução completa para que, com muito menos alteração de código, você possa atualizar seu aplicativo.

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

— Shashank Agrawal
fonte

Eventos foram removidos. Você pode fazer seu próprio serviço como evento, usando observáveis e comportamento do sujeito para poder publicar no ovserable e se inscrever para obter o valor.

— Mostafa Harb
fonte