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

Posted 2023-03-04

【中文标题】如何从 Ionic 5 中的@ionic/angular 错误修复成员事件

【英文标题】：How to fix member Event from @ionic/angular error in Ionic 5

【发布时间】：2020-05-28 13:38:31

【问题描述】：

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

src/app/app.component.ts(4,10) 中的错误：错误 TS2305：模块 '"/node_modules/@ionic/angular/ionic-angular"' 没有导出的成员 'Events'。

以下导入行导致问题：

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

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

【问题讨论】：

嗨，我也面临同样的问题。对我来说，Ionic 4 似乎删除了这些事件。我发现了这个：***.com/questions/58265379/… 也许这有帮助

我有同样的错误，也很乐意找到一个简单的替代品。就我而言，不想去 redux。

我也得到了这个。这似乎是一个巨大的、突破性的变化。 Ionic 团队有记录吗？如果是这样，我想读一下！

@Ipad 请检查我的答案。

@John 它记录在 Ionic 的重大变更文档中。请检查我的答案。

【参考方案1】：

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

【参考方案2】：

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

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

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

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

【讨论】：

感谢您的中等帖子！用于迁移！如果它可以处理取消订阅会很有用，但无论如何它都很棒！最好的问候！

嗨，@GuilhermeSampaio 很高兴答案和博客对您有用。关于退订，它已经在那里了。请再看一遍gist.github.com/sagrawal31/…

我不清楚！我说的是使用订阅它的字符串取消订阅！我已经修改了我的代码以使用您的事件服务在组件中执行此操作！ :D