角度自动刷新时间间隔

Question

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

表单组件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;
 }

这些表单视图和图形视图用于以下主要组件。

<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 初始化为图形组件的 init 过程的一部分。所以时间是从它被初始化的那一刻开始的，当你更新它不知道的间隔时，它会继续使用它被初始化的那个。

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

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 component 获得autorefresh 和interval 的更新并再次调用autoUpdateInit 以确保它更新IntervalObservable。您可以使用服务来确保两个组件都在查看与此 answer 相同的值。如果他们有父子关系，那么您可以通过@Output 发出更改。