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主题在取消订阅后运行两次

回答

相关问题