Angular：Rxjs 重复（）导致应用程序冻结

Question

我已经有一些 Angular 经验，但对 Rxjs 还很陌生。最近我想创建一个个人网站，为此我在网上找到了一个 Typwriter 教程，我想重新创建它。 它几乎只需要一个字符串数组并依次输入这些字符串，所以看起来就像有人在打字。

一切都按预期进行，但我遇到了一个问题。我想无限期地制作这个打字动画。因此，我只想使用 reapeat() 管道在完成后重新触发可观察对象。我想重复的次数越多，Angular 应用程序需要编译的时间就越长。当我想用repeat()无限期地重复它时，它就会永远加载。我真的需要一些帮助。

这是代码：

打字机服务：

export class TypewriterService {
  constructor() { }

  private type({ word, speed, backwards = false }: TypeParams) {
    return interval(speed).pipe(
      map(x =>
        backwards
          ? word.substring(0, word.length - x - 1) + '_'
          : word.substring(0, x + 1) + '_'
      ),
      take(word.length)
    );
  }

  typeEffect(word: string) {
    return concat(
      this.type({ word, speed: 50 }),
      of('').pipe(delay(1200), ignoreElements()),
      this.type({ word, speed: 30, backwards: true }),
      of('').pipe(delay(300), ignoreElements())
    );
  }

  getTypewriterEffect(titles: string[]) {
    return from(titles).pipe(
      concatMap((title) => this.typeEffect(title)),
      delay(1),
      repeat()
    );

  }
}

创建一个新的可观察对象：

this.typewriterString$ = this.typeWriterService
      .getTypewriterEffect(["Software Developer", "Adventurer", "Curious Mind"])

模板订阅：

<h3 style="min-height: 34px;">A passionate <span class="color-primary">{{typewriterString$ | async}}</span></h3>

我尝试以不同的方式订阅并调试打字机。这样我就将重复（）语句确定为问题所在。

Answer 1

我相信您正在使用 ssr，这就是应用程序“编译”这么长时间的原因。实际上它不会编译，但它正在等待您的逻辑完成并且应用程序变得稳定。

为了解决这个问题，我建议仅在浏览器上执行效果，并在服务器上仅渲染第一个单词

 getTypewriterEffect(titles: string[]) {
    if(isPlatformServer(this.platformId)) {
       return of(titles[0]);
    }
    return from(titles).pipe(
      concatMap((title) => this.typeEffect(title)),
      delay(1),
      repeat()
    );

  }