Угловое позиционирование оверлея

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

Похоже, что на левом тосте воспроизводятся 1-ые тосты, а затем запускаются 2 и 3 до полного обновления DOM.

Установка таймаута исправляет это, но произвольно. Вы можете подтвердить это, установив время появления на 2000 миллисекунд. Все 6 боксов постепенно исчезают / уменьшаются одновременно.

Кроме того, похоже, вдохновение для "тостера" не ожидало, что оно будет бороться с этим условием. Поскольку нажатие кнопки не будет достаточно быстрым, чтобы вызвать проблемы.