Обнаружение смены углового2 «Выражение изменилось после того, как оно было проверено»

Question

У меня проблема в Angular2 (окончательная) об обнаружении изменений и потоке данных между компонентами. Я работал над этим, но мне кажется, что он немного взломан для меня , поэтому было интересно, есть ли лучший способ сделать это.

В принципе у меня есть компонент А, который имеет дочерний компонент В, а также * ngFor, создающую количество детей компонентов C.

Для каждого компонента С, есть @Output определено, что обрабатывается в родительском компоненте A для каждого экземпляра C. На основании этого результата определяется другое свойство на компоненте A (только число), которое используется как @Input на компоненте B.

В режиме DEV каждый раз, когда запускается @Output в компонентах C , Я получаю ниже ошибки в консоли:

Expression has changed after it was checked. Previous value: XX. Current value: XX. 

От чтения об этом, его ожидании из-за однонаправленного потока данных в Angular2. Интересно, как заставить его работать должным образом в моем сценарии?

я временно вводили ChangeDetectorRef в компонент А и вызвать его метод detectChanges() в функции, которая обрабатывает событие @Output от экземпляра C. Я обеспокоен тем, что его не очень эффективной Тхо. Возможно, я попытаюсь улучшить его и называть его только после события последнего элемента (все компоненты C отправляют это событие одновременно), но потом я буду беспокоиться о асинхронном характере событий и о некоторых неожиданных поведении.

Есть ли у кого-нибудь идеи, как преодолеть эту проблему? Является ли мой проект принципиально ошибочным с точки зрения потока данных между компонентами? Нужно ли мне вместо этого использовать что-то вроде общей службы, чтобы обмениваться данными?

Любая помощь очень ценится.

Answer 1

Вы можете вводить private cdRef:ChangeDetectorRef и вызвать this.cdRef.detectChanges() в конце ngOnChanges(). Таким образом, Угловые пробеги снова меняют определение и не будут жаловаться на ранее измененные значения модели.

class MyComponent { 
    constructor(private cdRef:ChangeDetectorRef) {} 

    ngOnChanges(changes) { 
    this.xxx = ... 
    ... 
    this.cdRef.detectChanges(); 
    } 
}