时间戳

首页 > 解决方案 > 使用 angular7 一个一个地显示组件的子级

angular - 使用 angular7 一个一个地显示组件的子级

问题描述

我正在创建某种假聊天，让人们通过一些稍微复杂的步骤进行计算。这是一个仅包含重要部分的迷你示例：https ://stackblitz.com/edit/angular-htxjt9

<chat>
  <them>Hi</them>
  <you>Hello!</you>
  <them>Do you want to continue?</them>
  <you><button (click)="this.continue = true">Continue</button></you>
</chat>

<chat *ngIf="this.continue">
  <them>You started the next step</them>
  <them>Thanks</them>
  <you>Awesome</you>
</chat>

一旦一个<chat>组件初始化，它的所有直接子节点都需要一个一个地变得可见，延迟约 2 秒。

最好的方法是什么？

标签： angularangular7

解决方案

如评论中所述，您应该尝试使用 rxjs 延迟运算符。在示例中，我使用了 BehaviorSubject。由于这是一个示例，因此我省略了取消订阅。请不要忘记它。

在此处查看我的 stackblitz 示例：https ://stackblitz.com/edit/angular-dvtban

推荐阅读