Angular8 :实时刷新数据

Question

我在app.component中有代码，它让所有的用户

我试图每秒钟刷新我的页面，因为如果我打开了两个窗口并执行任何CRUD操作，第二个窗口将显示旧数据，而没有新的开发人员/等等。

我正在尝试使用ngOnDestroy，但它不起作用：

export class AppComponent implements OnInit{
  interval = interval(1000); // 1s 

  ngOnDestroy() {
    if (this.interval) {
      // @ts-ignore
      clearInterval(this.interval);
      this.getDevelopers();
    }
  }


  public getDevelopers(): void {
    this.developerService.getAllDevelopers().subscribe(
      (response: GetByIdDeveloperResponse[]) => {
        this.developers = response;
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }
}

我的服务方法怎么样：

  public getAllDevelopers(): Observable<GetByIdDeveloperRequest[]> {
    return this.http.get<GetByIdDeveloperResponse[]>(`${this.apiServerUrl}/api/v2/developers`);
  }

Answer 1

来自rxjs的间隔是可观察的，您需要订阅附加事件。

import { interval } from 'rxjs';

export class AppComponent implements OnInit, OnDestroy {
  $interval = interval(1000); // 1s
  subInterval;

  ngOnInit() {
      this.subInterval = this.$interval.subscribe(() => this.getDevelopers());
  }

  ngOnDestroy() {
    // destroy subscription
    if( this.subInterval ){
        this.subInterval.unsubscribe();
    }
  }


  public getDevelopers(): void {
    this.developerService.getAllDevelopers().subscribe(
      (response: GetByIdDeveloperResponse[]) => {
        this.developers = response;
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }
}