วิธีแก้ไขกิจกรรมสมาชิกจากข้อผิดพลาด @ ionic / angular ใน Ionic 5


11

ฉันได้อัพเกรดจาก Ionic 4 เป็น Ionic 5 ตอนนี้ได้รับข้อผิดพลาดดังต่อไปนี้:

ข้อผิดพลาดใน src / app / app.component.ts (4,10): ข้อผิดพลาด TS2305: โมดูล '"/ node_modules / @ ไอออนิก / แองกูลาร์ / อิออนเชิงมุม"' ไม่มีสมาชิกที่ส่งออก 'กิจกรรม'

บรรทัดการนำเข้าต่อไปนี้เป็นสาเหตุของปัญหา:

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

ฉันจะแก้ไขกิจกรรมสมาชิกจาก@ionic/angularข้อผิดพลาดใน Ionic 5 ได้อย่างไร


สวัสดีฉันกำลังเผชิญกับปัญหาเดียวกัน และสำหรับฉันดูเหมือนว่า Ionic 4 ลบกิจกรรม ฉันพบสิ่งนี้: stackoverflow.com/questions/58265379/…อาจช่วยได้
Ipad

1
ฉันมีข้อผิดพลาดเดียวกันก็ยินดีที่จะหาทดแทนที่ง่าย ไม่ต้องการไปหา redux ในกรณีของฉัน
Fargho

ฉันก็รับสิ่งนี้เช่นกัน ดูเหมือนว่าจะเป็นการเปลี่ยนแปลงครั้งใหญ่ นั่นเคยบันทึกไว้โดยทีม Ionic หรือไม่? ถ้าเป็นเช่นนั้นฉันอยากจะอ่านมัน!
จอห์น

@ iPad โปรดตรวจสอบคำตอบของฉัน
Shashank Agrawal

@ John เป็นเอกสารในเอกสารการเปลี่ยนแปลงที่ผิดพลาดของ Ionic โปรดตรวจสอบคำตอบของฉัน
Shashank Agrawal

คำตอบ:


18

Eventsจาก@ionic/angularแพคเกจได้ถูกลบออกจากอิออน 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


0

กิจกรรมถูกลบแล้ว คุณสามารถใช้บริการของคุณเองเป็นอีเวนต์ของคุณเองโดยใช้สิ่งที่สังเกตได้และพฤติกรรมของเรื่องดังนั้นคุณสามารถเผยแพร่ไปยัง ovserable และสมัครสมาชิกเพื่อรับค่า

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.