Angular中使用Observable实现内容渐进式填充的问题排查

需求与原Observable方案 #

想要在Angular组件中使用Observable实现内容的渐进式展示，原TypeScript代码如下：

export class ResultComponent implements OnInit{
 
 message: string = 'my message for user';
 spreadedMessage$: Observable<string> = from(this.message);
 progressiveMessage:string = "";

 ngOnInit() {
    let interval = 1
    this.obsMessage$
      .pipe(
        tap((letter) => {
           delay(35*interval),
           this.progressiveMessage += letter;
          interval++
        })
      )
      .subscribe();
    }
}

模板绑定代码：

<div> {{ progressiveMessage }} </div>

可行的替代方案 #

使用数组拆分+setTimeout的方案可以正常运行：

1. 将Observable定义改为数组：

spreadedMessage: string[] = [...this.message];

2. 在ngOnInit中通过循环设置定时器：

for (let i: number = 0; i < this.spreadedMessage.length; i++) {
    setTimeout(() => (this.progressiveMessage += this.spreadedMessage[i]), 35 * i);    
}

Observable方案的问题点 #

1. 变量名不匹配：代码中定义的Observable是spreadedMessage$，但订阅时使用的是未定义的this.obsMessage$，这会直接导致运行时错误，Observable根本没有被订阅执行。
2. RxJS操作符使用错误：delay是RxJS的管道操作符，不能在tap操作符内部直接调用。tap仅用于执行副作用（比如打印日志），不会改变数据流的时间线，里面的delay(35*interval)只是创建了一个未被订阅的Observable，完全起不到延迟作用。所有字母会被瞬间全部拼接到progressiveMessage中，看不到渐进式效果。
3. 响应式风格缺失（可选优化点）：直接修改组件属性的方式虽然能触发变更检测，但不符合RxJS的响应式设计思路。更好的做法是让Observable直接输出拼接完成的阶段性字符串，配合Angular的async管道绑定到模板，既不需要手动管理订阅（避免内存泄漏），也更符合Angular的响应式开发模式。

修正后的Observable方案 #

import { from, of, Observable } from 'rxjs';
import { concatMap, scan, delay } from 'rxjs/operators';

export class ResultComponent implements OnInit {
  message: string = 'my message for user';
  progressiveMessage$: Observable<string>;

  ngOnInit() {
    // 逐个发射字符，每个字符延迟对应时间，再通过scan拼接成完整字符串
    this.progressiveMessage$ = from(this.message).pipe(
      concatMap((letter, index) => of(letter).pipe(delay(35 * (index + 1)))),
      scan((accumulatedText, currentLetter) => accumulatedText + currentLetter, '')
    );
  }
}

模板绑定改为使用async管道：

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

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