如何无限期地循环遍历阵列并以角度显示值？

Question

我有一系列的单词，我的目标是每隔几秒钟将其中的每个单词显示在HTML模板中。结果应该是这样的： https：//bootstrapmade.com/demo/iportfolio/iportfolio/

知道可以通过使用以下JavaScript代码来进行操作：

  const typed = select('.typed')
  if (typed) {
    let typed_strings = typed.getAttribute('data-typed-items')
    typed_strings = typed_strings.split(',')
    new Typed('.typed', {
      strings: typed_strings,
      loop: true,
      typeSpeed: 100,
      backSpeed: 50,
      backDelay: 2000
    });
  }

我尝试使用Typescript复制相同的效果，然后写下以下代码：

export class HeroComponent implements OnInit {

  words: string[] = ['marco', 'polo'];
  word: string = "";
  constructor() { }

  ngOnInit(): void {
    setTimeout(() => {
    while(true){
      for (let i=0; i < this.words.length; i++) {
        setTimeout(() => {
        this.word = this.words[i];
        console.log(this.word)
      }, 4000)
      };
    }}, 4000);
  }
}

但是，一旦我运行了网站，它就说它的内存不足。

您是否可以提出一种聪明而优雅的方式来实现上面网站上链接的效果？

Answer 1

这将是这样做的方法：

import { map, timer } from 'rxjs';

@Component({
  ...
})
export class HeroComponent {
  words = ['marco', 'polo'];
  word = timer(0, 4000).pipe(
    map((num) => {
      const index = num % this.words.length;
      const word = this.words[index];
      console.log(word);
      return word;
    })
  );
}

然后使用html中的异步管：

<p>{{ word | async }}</p>

示例： https://stackblitz.com/edit/edit/angular-ivy-7xbuft?file=src/app/app/app/app.component.ts

---

Timer从第一个参数（0ms）开始，以增加顺序（0、1、2、3，...）以越来越多的顺序发射整数，然后每次由第二个参数（4000ms）给出的每个间隔。

管道让我们可以在返回之前对任何发射值执行一系列操作。

MAP取出发射值并返回不同的值，在这种情况下，我们使用整数计算数组的索引，然后在该索引处返回单词。

async管道将在销毁组件时订阅可观察到的可观察情况并取消订阅，以停止执行。取消订阅对于防止内存泄漏很重要。