ค้นหาเว็บไซต์

angular - unsubscribe ไม่ใช่ฟังก์ชันบน observable


ฉันกำลังสร้างแอปพลิเคชันลากแล้ววาง และฉันได้สร้าง observable สำหรับตำแหน่งเมาส์ ซึ่งจะปรับตำแหน่งของ drag-object ของฉัน

mouseMove$: any;

constructor(){
  this.mouseMove$ = Observable.fromEvent(document, 'mousemove')
    .do((mouseevent: MouseEvent) => {
      if (document.getElementById("drag-object")){
        document.getElementById("drag-object").style.left = (mouseevent.clientX) + 'px';
        document.getElementById("drag-object").style.top = (mouseevent.clientY) + 'px';
      }
  });

ด้วยการใช้งานนี้ ฉันไม่มีปัญหาในการสมัครสมาชิกด้วยวิธีนี้:

this.mouseMove$.subscribe();

อย่างไรก็ตาม ฉันดูเหมือนไม่สามารถยกเลิกการสมัครโดยวิธีใดๆ ได้:

this.mouseMove$.unsubscribe();

หรือ

this.mouseMove$.dispose();

ในทั้งสองกรณี ฉันจะได้รับข้อผิดพลาดประเภทต่อไปนี้:

TypeError: this.mouseMove$.unsubscribe ไม่ใช่ฟังก์ชัน ...

ฉันไม่แน่ใจว่าสิ่งนี้เกี่ยวข้องกับประเภท mouseMove$ ของ any หรือไม่ แต่การตั้งประเภทเป็น Observable และ Observable<MouseEvent> ไม่สามารถใช้งานได้ ฉันไม่เข้าใจตรงไหน?

คำตอบ #1

คุณอาจกำลังใช้เวอร์ชันใหม่ของ RxJS ซึ่งมีการเปลี่ยนแปลง API โดย Observable.subscribe จะคืนค่า Disposable ซึ่งคุณต้องเรียก .unsubscribe ตอนนี้ (dispose กลายเป็น unsubscribe ใน RxJS5) น่าเสียดายที่ยังมีบทเรียนและโพสต์บล็อกเก่าๆ อยู่มากมายที่ทำตาม "วิธีเก่า" ทำให้เกิดความสับสนนี้

ดังนั้น โค้ดของคุณควรเป็น

let disposeMe = this.mouseMove$.subscribe();

และ หลังจากที่คุณเสร็จแล้ว

disposeMe.unsubscribe();

สำหรับรายการการเปลี่ยนแปลง API ทั้งหมดจากเวอร์ชัน 4 เป็น 5 โปรดตรวจสอบไฟล์นี้

คำตอบ #2

ตรวจสอบให้แน่ใจว่า this.mouseMove$ ของคุณเป็น observable ก่อน:

if (this.mouseMove$ !== undefined) {
  this.mouseMove$.unsubscribe();
}

อาจจะในกรณีของคุณ คุณยกเลิกการสมัครก่อนที่ this.mouseMove$ จะถูกกำหนดค่าใด ๆ

บทความที่เกี่ยวข้อง