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

crary,记忆2024-03-06 22:49

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

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

javascript 复制代码

// 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);
  }
}

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

javascript 复制代码

// 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))
);

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