Angular应用监听USB设备状态变更时如何触发日志打印？

实现方案 #

你只需要新增一个变量存储上一次的状态值，每次拉取到新状态时和旧值做对比，状态不一致时打印对应日志即可。

最小改动方案（兼容现有代码）

直接修改你的ts文件代码：

import { interval } from 'rxjs';
...
// 新增变量存储上一次的状态
private previousStatus: string = '';
status : string = '';

constructor(private httpClient : HttpClient) {
  interval(1000).subscribe(x => {
    this.getRequest();
  });
}

getRequest(){
  this.httpClient.get<Notification>('.../notification/1')
  .subscribe(notification => {
    const newStatus = notification.status;
    // 排除首次加载、状态无变化的场景，仅状态变更时打印日志
    if (this.previousStatus !== '' && newStatus !== this.previousStatus) {
      newStatus === '1' ? console.log('USB设备已连接') : console.log('USB设备已断开');
    }
    // 更新状态
    this.status = newStatus;
    this.previousStatus = newStatus;
  });
}

RxJS优化方案

你也可以用RxJS自带的distinctUntilChanged操作符简化代码，同时还能避免请求堆积、返回顺序错乱的问题：

import { interval, switchMap, distinctUntilChanged } from 'rxjs';
...
status : string = '';

constructor(private httpClient : HttpClient) {
  interval(1000)
    .pipe(
      // 每次轮询发起请求，自动取消上一次未完成的请求
      switchMap(() => this.httpClient.get<Notification>('.../notification/1')),
      // 过滤掉和上一次结果相同的响应
      distinctUntilChanged((prev, curr) => prev.status === curr.status)
    )
    .subscribe(notification => {
      this.status = notification.status;
      this.status === '1' ? console.log('USB设备已连接') : console.log('USB设备已断开');
    });
}

内容的提问来源于stack exchange，提问作者KaidoSama