Angular 使用 Observable 进行渐进式填充

在您的第一个示例代码中，delay()什么也不做！您已将其包含在tap运算符中，这是不正确的.它需要直接在.pipe()内.

然而，即使你把它放在正确的位置，我认为让它像你希望的那样工作是很棘手的，因为延迟持续时间不是针对每一次emits 进行判断的，它只使用初始值interval判断一次，

我认为这would个左右是可行的:

  ngOnInit() {
    this.spreadedMessage$.pipe(
      concatMap(letter => of(letter).pipe(delay(35))),
      tap(letter => this.progressiveMessage += letter),
    ).subscribe();
  }

在这里，我们 for each emits 返回一个新的concatMap以内的可观测值，这允许 for each emits 的字母计算延迟间隔.

但是，如果您只是简单地try 以恒定的间隔一次emits 一个角色，使用interval Creator函数可能会更容易，如下所示:

    interval(35).pipe(
      map(i => this.message[i]),
      take(this.message.length),
      tap(letter => this.progressiveMessage += letter),
    ).subscribe();

由于interval会发出从0开始的递增整数，因此我们可以将其用作要发出的字符的索引.

一旦emits 的数量达到消息的长度，我们就使用take操作符结束流.

为了进一步简化，我们可以减少外部变量progressiveMessage变量，只发出message字符串中我们感兴趣的部分.

  interval(35).pipe(
    map(i => this.message.slice(0, i+1)),
    take(this.message.length),
  ).subscribe();

而且，如果您想要进一步简化，可以将值定义为一个可观察的值，并利用模板中的async管道.这样就不需要订阅和使用ngOnInit:

  progressiveMessage$ = interval(35).pipe(
    map(i => this.message.slice(0, i+1)),
    take(this.message.length),
  );

<p>
  {{ progressiveMessage$ | async }}
</p>

这里有一个小的StackBlitz个例子.