如何修复来自 Ionic 5 中@ionic/angular 错误的成员事件

Question

我已经从 Ionic 4 升级到 Ionic 5，现在出现以下错误：

ERROR in src/app/app.component.ts(4,10): error TS2305: Module '"/node_modules/@ionic/angular/ionic-angular"' has no exported member 'Events'.

以下导入行导致了问题：

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

如何修复 Ionic 5 中 @ionic/angular 错误导致的成员事件？

Answer 1

事件已被删除。 您可以使用 observables 和主题行为将自己的服务作为事件作为您自己的服务，这样您就可以发布到 ovserable 并订阅以获取值。

Answer 2

Events 来自 @ionic/angular 包已从 Ionic 5 中删除。您可以在 Ionic5 here.

中看到重大更改

如重大更改中所述，您应该使用 Observables。

例如，您可以创建以下服务：

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

现在，您可以订阅任何组件，例如 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);
        });
    }
}

现在，您只需从其他组件发出事件：

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

这是一个非常简单的 solution/example 或 Events 的替代方案，但您可以进一步调整代码，使其成为具有主题的命名空间事件。

我已经写了一篇关于此的博客，它可以为您提供一个功能齐全的解决方案，这样您只需很少的代码更改，就可以升级您的应用程序。

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

Answer 3

如果你看到 Breaking Change，你会看到 @ionic/angular 事件已从 Ionic 5 中删除，他们说要使用 Observables 或 Redux 作为替代。

有了这篇文章可以解决这个问题，添加一个类似于Events of Ionic v4的新服务:

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