javascript - 时间间隔 Angular 自动刷新

Question

在我的 Angular2 应用程序中，有两个组件用于表单 View 和图形 View 。在表单中，有一个用于自动刷新句柄的微调器和复选框。

表单组件 html

<div class="refresh-spinner">
      <my-checkbox
        [selected]=autoRefresh
        [disabled]="false"
        [id]="'autoRefresh'"
        [name]="'Auto Refresh Every'"
        [code]="'autoRefresh'"
        (status)="checkAutoRefresh($event)">
      </my-checkbox>
      <my-spinner [title]="''"
                  [category]="'duration'"
                  [maxCount]=maxRefreshTime
                  [minCount]=minRefreshTime
                  [value]=minRefreshTime //default refresh value is 1 min
                  [editable]="true"
                  (count)="getAutoRefreshInterval($event)">
      </my-spinner>
      <span class="post__text"> Mins</span>
    </div>

表单组件 ts

// form view emits selected criteria
@Output() criteria = new EventEmitter<any>();

checkAutoRefresh(ele) {
   this.autoRefresh = ele.selected;
   localStorage.setItem('autoRefresh', ele.selected);
}

getAutoRefreshInterval(interval) {
   localStorage.setItem('refreshInterval', interval.value);
}

刷新间隔和复选框值(autoRefresh true/fasle)设置为微调器事件和复选框选择事件的本地存储。

图组件ts

alive: boolean; // used to unsubscribe from the IntervalObservable when OnDestroy is called.

@Input() criteria: FilteringCriteria;

constructor(private element: ElementRef, private myService: MyService) {
    this.alive = true;
 }

 ngOnInit() {
    let interval: number = JSON.parse(localStorage.getItem('refreshInterval'));
   console.log(Date());
   this.getStatistics();

   IntervalObservable.create(interval * 60 * 1000)
  .takeWhile(() => this.alive)
  .subscribe((e) => {
    // console.log(e)
    if (JSON.parse(localStorage.getItem('autoRefresh'))) {
      console.log(Date());
      this.getStatistics();
    }
  });
  }

 ngOnDestroy() {
   this.alive = false;
 }

这些表单 View 和图形 View 在主要组件中使用如下。

<search-criteria (criteria)="emitCriteria($event)"></search-criteria> //filteringCriteria emits from here

<ng-template ngFor let-result [ngForOf]="servers" let-i="index">
    <my-grid-item row [class]="'graph--view'"
                    [colspan]="4">
      <graph-view [criteria]="filteringCriteria"></graph-view>
    </my-grid-item>
</ng-template>

两个问题:

1. 一旦我选中自动刷新复选框，图表就会在 1 分钟内刷新。但是时间间隔是从组件初始化的时间计算的，而不是从选中复选框的时间计算的。

2 如果我更改微调器的值(从 1 分钟到 2 分钟)，本地存储值将更改为新值 2。但是图表会以 1 分钟的时间间隔刷新。但是如果我点击表单完成按钮，那么图表会在新的时间间隔(2 分钟)内刷新。

如有任何建议，我们将不胜感激。

谢谢!

Answer 1

这是因为您正在将 Observable 初始化为图形组件初始化过程的一部分。所以时间是从它初始化的那一刻开始的，当你更新时间间隔时，它不知道这一点，并继续使用它被初始化的时间。

您可以声明一个变量来保存订阅并移动所有代码以订阅不同的方法。有点像

subscription;

constructor(private element: ElementRef, private myService: MyService) {
}

ngOnInit() {
    this.getThreadPoolStatistics();
    this.autoUpdateInit();
    // subscribe to autoRefresh and interval changes
    // autoRefreshChange.subscribe( () => this.autoUpdateInit());
    // intervalChange.subscribe( () => this.autoUpdateInit());
}

autoUpdateInit(){
    let interval: number = JSON.parse(localStorage.getItem('refreshInterval'));
   console.log(Date());
    // remove the old subscription
   if(subscription) {
       subscription.unsubscribe();
       subscription = null;
   }
   // create one only when you need it. check for autorefresh and alive?
   if(<subscription required>){
       subscription = IntervalObservable.create(interval * 60 * 1000)
      .subscribe((e) => {
          // console.log(e)
          if (JSON.parse(localStorage.getItem('autoRefresh'))) {
            console.log(Date());
            this.getStatistics();
          }
       });
   }
}

您必须确保您的Graph 组件 获取autorefresh 和interval 的更新并调用autoUpdateInit 以确保它更新 IntervalObservable。您可以使用服务来确保两个组件都按照此 answer 查看相同的值.如果他们有父子关系，那么您可以通过 @Output 发出更改。