Angular2 - Rxjs主題在取消訂閱後運行兩次

我正在使用angular2和electron編寫桌面應用程序，並且有一個下載功能。Angular2 - Rxjs主題在取消訂閱後運行兩次

我DownloadService是這個

import {Injectable} from '@angular/core'; 
import {Subject} from "rxjs"; 

interface IQueueItem { 
    url: string 
} 

@Injectable() 
export class DownloadService { 
    private queue: Array<IQueueItem> = []; 

    private downloadSubject: Subject<any>; 

    constructor() { 
     this.downloadSubject = new Subject(); 
    } 

    addToList(item: IQueueItem) { 
     this.queue.unshift(item); 

     downloadList(); 

     return this.downloadSubject; 
    } 

    downloadList() { 
     // pick one item from queue and send it to electron to download and store 

     // do this every time a chunk of data received 
     this.downloadSubject.next(evt); 
     ... 
    } 

    pauseDownload(item) { 
     // send an event to electron to it should stop downloading and therefore no chunk of data will receive 
     // also remove item from queue 
     ... 
    } 
}

而且我ItemComponent是這樣的：

import {Component} from '@angular/core'; 
import {DownloadService} from "../services/download.service"; 

@Component({ 
    selector: 'app-item', 
    template: ` 
     ... 
     ` 
}) 
export class ItemComponent { 
    constructor(private downloadService: DownloadService) { 
     this.addToQueue(); 
    } 

    subscription; 

    downloadedBytes = 0; 

    fileUrl = ''; 

    pause() { 
     this.downloadService.pauseDownload(this.fileUrl); 

     this.subscription.unsubscribe(); 

     ... 
    } 

    resume() { 
     this.addToQueue(); 
    } 

    private addToQueue() { 
     this.subscription = this.downloadService.addToList(this.fileUrl) 
      .subscribe(evt => { 

       console.log(evt.delta); 

       this.downloadedBytes += evt.delta; 
      }); 
    } 
}

問題是，當我停下，我從Subject從DownloadService通過取消一個項目，但是當我再次，每一個將簡歷console.log()打印兩次並將兩次數據添加到downloadedBytes。此外，如果我暫停並再次恢復，它會添加越來越多的字節和日誌！

我搜索了但我找不到任何線索解決。

來源

2016-12-25 Sina Mirhejazi

我的猜測工作的例子是，它來自於事實的downloadlist（）將組件列表。但是因爲我們不知道這個列表是什麼，當主體發出事件，它被用於什麼，pauseCourse（）做了什麼，等等，這很難解釋。提供一個完整的例子來重現問題。 –

@JBNizet對不起，我做了很多簡化，顯然結果並不好。我添加了更多詳細信息 –

我無法複製它https://plnkr.co/edit/64mn6U1omy8JPE6LD4Nf?p=preview。檢查也http://stackoverflow.com/questions/35673582/http-request-made-multiple-times-in-angular2-service – yurzui

您可以從yurzui創建的，如果你恢復和暫停一切正常的PLUNKER看到，只觸發一次。
的問題是，當你點擊簡歷2次連續爲第一訂閱將會丟失在存儲器中，只有第二一個將被存儲在this.subscription將進入第一個是丟失，你不能退訂。

這更像是一個應用程序的問題比rxjs，你不應該能夠點擊的簡歷如果訂閱未暫停，所以你需要妥善處理的狀態，這樣的事情（從@yurzui plunker編輯）：

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>Angular 2 Systemjs start</h1> 
    <button *ngIf="started && !paused" (click)="pause()">Pause</button> 
    <button *ngIf="started && paused" (click)="resume()">Resume</button> 
    <button *ngIf="!started" (click)="start()">Start</button> 
    ` 
}) 
export class App { 
    constructor(private downloadService: DownloadService) { 
    this.addToQueue(); 
    } 

    subscription; 
    downloadedBytes = 0; 
    started = false; 
    paused = false; 


    pause() { 
    this.paused = true; 

    this.subscription.unsubscribe(); 
    } 

    start() { 
    this.started = true; 

    this.addToQueue(); 
    } 

    resume() { 
    this.paused = false; 

    this.addToQueue(); 
    } 

    private addToQueue() { 
    this.subscription = this.downloadService.addToList(this) 
     .subscribe(evt => { 

     console.log(11); 

     this.downloadedBytes += evt.delta; 
     }); 
    } 
}

你可以找到在這個更新PLUNKER

來源

2016-12-25 10:48:12 tibbus

Angular2 - Rxjs主題在取消訂閱後運行兩次

回答

相關問題