Неожиданное поведение обнаружения изменений с помощью стратегии OnPu sh

Question

Я столкнулся с очень странным поведением детектора изменений (с OnPu sh). Я даже не могу объяснить это себе и не знаю, как это исправить. Тем не менее, я воспроизвел это поведение в очень простом примере на stackblitz

https://stackblitz.com/edit/angular-h28cw8

Есть три компонента: основной app компонент, data компонент и loading indicator компонент. Основной компонент может отображать компонент data через <router-outlet>, когда пользователь щелкает ссылку Go to data. Также есть сервис (он же состояние приложения). Когда пользователь нажимает Go to data, компонент data запрашивает эту услугу для данных, которые загружаются с некоторой задержкой. Для эмуляции этой задержки я использую таймер rx js, но с HttpClient поведение абсолютно одинаковое. Данные и значения загрузки связаны с использованием async трубы. Но по какой-то причине данные отображаются так, как ожидалось, а loading - нет (лучше сказать, что они работают время от времени, но не всегда). Это приводит к тому, что индикатор загрузки не появляется на экране. Я также записываю значения в консоль, где легко видеть, что наблюдаемое loading$ излучает значение, но привязка @Input по какой-то причине не работает. Почему так работает и как это исправить?

Answer 1

Причина, по которой он не работает, заключается в том, что вы отправляете значение this._loading.next(true) из дочернего компонента после проверки родительского компонента.

Канал Asyn c запускает подписку и работает как задумано , то есть работает cdRef.markForCheck();. Но не запускает обнаружение изменений, а только отмечает компонент, где используется AsyncPipe, для проверки . После запуска нового цикла обнаружения изменений ваш компонент распознает входные изменения.

Чтобы исправить это, вы можете обернуть this._common.getData() в микрозадачу вашего дочернего компонента

Promise.resolve().then(() => {
   this._common.getData();
});

Разветвленный стекблиц