Angular 5中AngularJS $interval的等效实现方法问询

嘿，我之前也纠结过这个问题，Angular 5里用RxJS就能完美复刻$interval的功能，而且写法相当直观！

核心思路 #

AngularJS的$interval本质是按指定延迟重复执行函数N次，RxJS里的interval操作符刚好负责定时发值，再配合take操作符限制执行次数，就能完全匹配你的需求。

具体实现步骤 #

1. 导入必要的RxJS工具
   首先在组件文件顶部导入需要的类和操作符：

   import { interval, Subscription } from 'rxjs';
   import { take } from 'rxjs/operators';
   

2. 编写替代$interval的代码
   下面的代码完全对应你给出的AngularJS示例：

   // 声明一个订阅对象，用来管理后续的订阅销毁
   private intervalSubscription: Subscription;
   
   // 封装成方法，参数对应原$interval的延迟和次数
   startRepeatedTask(delay: number, count: number) {
     // interval(delay) 每隔delay毫秒发出一个值
     // take(count) 只取前count个值，也就是执行count次后停止
     this.intervalSubscription = interval(delay)
       .pipe(take(count))
       .subscribe(() => {
         // 这里放你要重复执行的逻辑
         this.myFunction(param1, param2);
         this.i++; // 你的业务变量处理
       });
   }
   
   // 关键：组件销毁时取消订阅，防止内存泄漏
   ngOnDestroy() {
     if (this.intervalSubscription) {
       this.intervalSubscription.unsubscribe();
     }
   }
   

额外技巧：如果需要立即执行第一次 #

如果你的场景要求第一次函数执行不需要等待延迟（AngularJS的$interval默认是第一次也等延迟），可以把interval(delay)换成timer(0, delay)，这样会立即触发第一次执行，之后每隔delay毫秒执行一次：

this.intervalSubscription = timer(0, delay)
  .pipe(take(count))
  .subscribe(() => {
    this.myFunction(param1, param2);
    this.i++;
  });

简化订阅管理：用Async Pipe #

如果你不想手动处理订阅销毁，可以把Observable绑定到组件属性，然后在模板里用async管道，Angular会自动帮你管理订阅的生命周期：

// 组件类里
public taskTrigger$ = interval(delay).pipe(take(count));

// 模板里
<div *ngIf="taskTrigger$ | async">
  {{ myFunction(param1, param2) }}
</div>

这种方式适合逻辑和模板关联的场景，纯业务逻辑还是手动订阅更灵活。

内容的提问来源于stack exchange，提问作者Bogdan Pușcașu