如何修复 Ionic 5 中来自 @ionic/角度误差的成员事件

Question

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

src/app/app.component.ts(4,10( 中的错误：错误 TS2305：模块"/node_modules/@ionic/角度/离子-角度"没有导出的成员"事件"。

以下导入行导致问题：

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

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

Answer 1

软件包中的Events@ionic/angular从 Ionic 5 中删除。您可以在此处查看 Ionic5 中的重大更改。

如中断性更改中所述，应使用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'
});
}
}

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

我写了一篇关于此的博客，可以为您提供功能齐全的解决方案，以便您可以以非常少的代码更改来升级您的应用程序。

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

Answer 2

事件已被删除。 您可以使用可观察量和主题行为将自己的服务作为您自己的事件来执行，以便您可以发布到 ovserable 并订阅以获取值。

Answer 3

如果你看到重大更改，你会看到@ionic/angular Event已经从Ionic 5中删除，他们说使用Observables或Redux作为替代方案。

本文可以解决此问题，请添加类似于 Ionic v4 事件的新服务：

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