Observable Unsubscribe

Observable מקפיץ לנו מידע. יש Observable s שימשיכו להציף מידע ללא הפסקה, אנחנו צריכים להגיד להם במפורש להפסיק לעשות את זה. אחרת הם ימשיכו וזה יהיה על חשבון המקום בזיכרון שלנו.

כדי לראות איך זה עובד נשתמש בפונקציית interval. היא יוצרת Observable שמטריג מספרים בצורה סדרתית. ה-Observable שנוצר על ידי הפונקציה הזאת ימשיך לשלוח את המידע עד אינסוף אם לא נבצע unsubscribe ממנו.

ניצור Observable חדש על ידי פונקציית interval. לפונקציה צריך להעביר זמן שבו היא מקפיצה אירוע, נשים 1000 שזה אומר כל שנייה. הפונקציה מחזירה Observable ונגדיר משתנה שיקבל אותו.

counterObservable = interval(1000);

עכשיו נעשה subscribe ל-Observable הזה. הפונקציה next תחזיר את הערכים שה-Observable הזה מקפיץ, נדפיס אותם ל-console.

ngOnInit(){
    this.counterObservable.subscribe(value => {
      console.log(value);
    });
}

אם נריץ את התוכנית נראה שכל שנייה מודפס מספר לקונסול.

כדי לעצור את הפעולה של ה-observable קודם נחבר את ה-subscriber למשתנה.

counterObservable = interval(1000);
counterSubscriber;

ngOnInit(){
    this.counterSubscriber = this.counterObservable.subscribe(value => {
      console.log(value);
    });
}

עוד דבר שאני רוצה לעשות זה לחבר את הערכים למשתנה displayNumber שיוצג עם המסך ולהוסיף לקובץ ה-html כפתור שבלחיצה עליו נבצע את פעולת ה-unsubscribe.

counterObservable = interval(1000);
counterSubscriber;
displayNumber: number;

ngOnInit(){
    this.counterSubscriber = this.counterObservable.subscribe(value => {
      this.displayNumber = value;
    });
}

<h2>{{ displayNumber }}</h2>
<button class="btn btn-primary" (click)="unsubscribe()">
    Stop the Observable
</button>

נכתוב את הפעולה בפונקציה unsubscribe.

unsubscribe(){
    this.counterSubscriber.unsubscribe();
}

עכשיו בלחיצה על הכפתור, הריצה של המספרים תעצור.

ניווט במאמר

מאמרים אחרונים

Weekly Tutorial