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;
        })
    );
}

按照this post,Angular将自行清理.

但是,如果您要在应用程序中拥有实时数据流,我建议更改您的组件,以便不是订阅服务的http请求的每个响应,而是订阅一次新的可观察数据$属性.在组件的ngOnInit()中提供服务.然后,按间隔(正如您所做的那样)在您的服务上调用updateData()(或设置服务中的间隔),但不要订阅.当您的服务成功提取数据时,它会将下一个值推送到其可观察数据$property,从而为您提供服务中的数据流,您可以对应用中的任何位置做出反应.

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
}

随着myService.data $在您的服务中更新了可观察的BehavIoUrSubject,如下所示：

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);
    })
}

这样,您可以避免多个订阅,并使数据流可用于任何需要它的组件.

Angular2 / 4：刷新数据实时

猜你在找的Angularjs相关文章