Angular2 / 4：刷新数据实时

我需要在一个间隔中刷新组件页面中的数据.此外,我需要在执行某些操作后刷新数据.我在服务中使用Obeservables,以便我可以在响应准备好时订阅.我正在推送对象的订阅,以便我可以在ngDestroy上清除它,我认为,我有以下方法来实现相同的目的.

方法1：setInterval

我在ngOnInit上设置了一个间隔,它将以相等的间隔调用refreshData.将使用ngOnDestroy方法中的clearInterval清除interval对象.

export class MyComponent implements OnInit,OnDestroy {
    private subscription: Subscription = new Subscription();

    data: any;
    interval: any;

    ngOnInit() {
        this.refreshData();
        this.interval = setInterval(() => { 
            this.refreshData(); 
        },5000);
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
        clearInterval(this.interval);
    }

    refreshData(){
        this.subscription.add(
            this.myService.getData()
                .subscribe(data => {
                    this.data = data;
                })
        );
    }

    doAction(){
        this.subscription.add(
            this.myService.doAction()
                .subscribe(result => {
                    if(result === true){
                        this.refreshData();
                    }
                })
        );
    }
}

Q1：在每次刷新调用时,订阅都会添加到订阅对象中,这会增加内存使用量,如果用户保持页面打开一段时间,浏览器可能会崩溃吗？

方法2：Observable.timer

此方法使用将在刷新数据后创建的计时器.

export class MyComponent implements OnInit,OnDestroy {
    private subscription: Subscription = new Subscription();

    data: any;

    ngOnInit() {
        this.refreshData();
    }

    ngOnDestroy() {
        this.subscription.unsubscribe();
    }

    refreshData(){
        this.subscription.add(
            this.myService.getData()
                .subscribe(data => {
                    this.data = data;
                    this.subscribeToData();
                })
        );
    }

    subscribeToData(){
        this.subscription.add(
            Observable.timer(10000).subscribe(() => this.refreshData())
        );
    }

    doAction(){
        this.subscription.add(
            this.myService.doAction()
                .subscribe(result => {
                    if(result === true){
                        this.refreshData();
                    }
                })
        );
    }
}

Q2：我在这里有同样的问题(Q1).这样,也会将定时器添加到订阅对象,因此实际上订阅对象中的订阅加倍.

问题3：要在操作方法 – doAction()之后刷新数据,将调用refreshData.那会创建另一个计时器链吗？

问题4：没有内存泄漏或者是否存在其他方式,哪种方式更好？

ngOnInit() {
    this.refreshData();
    this.interval = setInterval(() => { 
        this.refreshData(); 
    },5000);
}

refreshData(){
    this.myService.getData()
        .subscribe(data => {
            this.data = data;
        })
    );
}

ngOnInit() {
    this.myService.data$.subscribe(data => { // subscribe once to the data stream
        this.data = data;
    })

    this.refreshData();
    this.interval = setInterval(() => { 
        this.refreshData(); 
    },5000);
}

refreshData(){
    this.myService.updateData(); // simply signal for the service to update its data stream
}

public data$: BehaviorSubject<any> = new BehaviorSubject({});

updateData() {
    let data = this.http.get('http://www.data.com').map((data)=>{
        return data.json();
    }).do((data)=>{
        this.data$.next(data);
    })
}