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）设置为spinner事件和复选框选择事件的本地存储。

图表组件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发出更改。

角度自动refesh在时间间隔

1 个答案: