Angular 将一个字符串进行逐字显示的方法汇总

        接上文https://blog.csdn.net/qq_44327851/article/details/136201219， 公司项目是angular，所以实际中使用，我是要考虑到应用Angular框架中，下面是我想到的一些方法汇总，欢迎大家检阅！

1. 在组件的HTML模板中使用*ngFor指令和setTimeout函数实现逐字显示效果：

   // app.component.ts
   import { Component, OnInit } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     template: `
       <div>
         <span *ngFor="let char of text; let i = index">
           <span *ngIf="i < currentIndex">{{ char }}</span>
         </span>
       </div>
     `
   })
   export class AppComponent implements OnInit {
     text = 'Hello World';
     currentIndex = 0;
   
     ngOnInit() {
       const interval = setInterval(() => {
         this.currentIndex++;
         if (this.currentIndex === this.text.length) {
           clearInterval(interval);
         }
       }, 1000);
     }
   }
   

2. 使用RxJS的interval操作符和map/pluck/scan/bufferCount操作符：

   // map操作符
   import { Component } from '@angular/core';
   import { interval } from 'rxjs';
   import { map, take } from 'rxjs/operators';
   
   @Component({
     selector: 'app-root',
     template: `
       <div>{{ text$ | async }}</div>
     `
   })
   export class AppComponent {
     text = 'Hello World';
     text$ = interval(100).pipe(
       take(this.text.length),
       map(i => this.text.slice(0, i + 1))
     );
   }
   
   //scan操作符
   // HTML模板
   <div>{{ text$ | async }}</div>
   
   // 组件代码
   text = "Hello World";
   text$ = interval(100).pipe(
     scan((acc, curr) => this.text.substr(0, curr + 1), '')
   );
   
   
   //pluck操作符
   // HTML模板
   <div>{{ text$ | async }}</div>
   
   // 组件代码
   text = "Hello World";
   text$ = interval(100).pipe(
     pluck('text'),
     map(i => this.text.substr(0, i + 1))
   );
   
   
   //bufferCount操作符
   // HTML模板
   <div>{{ text$ | async }}</div>
   
   // 组件代码
   text = "Hello World";
   text$ = interval(100).pipe(
     bufferCount(1),
     map(arr => this.text.substr(0, arr.length))
   );
   
   

3. 使用rjxs的timer操作符和map/pluck/scan/bufferCount操作符：这个方法跟第二点几乎一样，只是把interval操作符换成timer操作符就好了，其它的用法一模一样，所以就不过多叙述了。