角度叠加定位-如何工作？

Question

使用@angular/cdk-叠加时，根据其调用方式，会产生不同的结果。其背后的原因/机制是什么？

  showDifference() {
const amount = 3;
// left side ! NOTE: no timeout
for (let i = 1; i <= amount; i++) {
  this.show({
    text: `left ${i}`,
  }, "left")
}

// right side ! NOTE: timeout
for (let i = 1; i <= amount; i++) {
  setTimeout(() => {
    this.show({
      text: `right ${i}`,
    }, "right")
  }, 0)

}

}

Stackblitz：https://stackblitz.com/edit/mortom-toast-behavior?file=src%2Fapp%2Ftoast%2Ftoast.service.ts

注意：在show()方法的右侧包装了一个超时，而在左侧则没有显示。但是只有在右侧的烤面包位置才是正确的。

Answer 1

似乎正在发生的事情是，在左吐司上呈现第一个吐司，然后在DOM完全更新之前启动2和3。

设置超时可以解决此问题，但是可以任意选择。您可以通过将fadeIn时间设置为2000毫秒来确认这一点。所有6个盒子都以相同的时间/速率渐渐消失。

此外，似乎“ the inspiration”代表“烤面包机”没想到要应对这种情况。作为按钮，单击速度不足以引起问题。