Angular2 변경 감지 "확인 된 후에 표현식이 변경되었습니다."

Question

구성 요소 간의 변경 감지 및 데이터 흐름과 관련된 Angular2 (최종) 문제가 있습니다. 나는 그 주위를 돌아 다녔다. 그러나 나에게 조금 해키처럼 보일 것이다. 그래서 그것을하는 더 좋은 방법이 있는지 궁금하게 생각하고 있었다. 기본적으로

그 부모 구성 요소에서 처리 정의 된 @Output가 모든 구성 요소 C의 아이 요소의 수 C.

를 생성 * ngFor 또한 하위 구성 요소 B와이있는 구성 요소 A가 A의 각 인스턴스에 대해 A 출력을 기반으로 구성 요소 A의 다른 속성이 결정되고 (숫자 만) 구성 요소 B에서 @Input으로 사용됩니다.

DEV 모드에서 구성 요소 C의 @Output이 트리거 될 때마다 콘솔 아래에 오류가 있습니다.

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

Angular2에서 단방향 데이터 흐름으로 인해 예상되는 종류입니다. 내 시나리오에서 제대로 작동하게하는 방법을 궁금해?

나는 일시적으로 부품 A에 ChangeDetectorRef을 주입 나는 매우 효율적이지 상점이 걱정 C. 의 인스턴스에서 @Output 이벤트를 처리하는 기능에 자사의 detectChanges() 메소드를 호출합니다. 아마 그것을 향상시키고 마지막 항목의 이벤트 (모든 C 구성 요소가 동시에 해당 이벤트를 보냄) 후에 만 ​​호출 할 수는 있지만 이벤트의 비동기 성질과 예상치 못한 동작에 대해 걱정할 것입니다.

누구든지이 문제를 해결하는 방법을 알고 있습니까? 내 디자인은 구성 요소 간의 데이터 흐름면에서 근본적으로 결함이 있습니까? 공유 서비스 대신 데이터를 교환해야합니까?

도움을 주시면 감사하겠습니다.

Answer 1

당신은 private cdRef:ChangeDetectorRef를 삽입 할 수 있으며 ngOnChanges()의 끝에서 this.cdRef.detectChanges()를 호출합니다. 이렇게 Angular run은 감지를 다시 변경하고 이전에 수정 된 모델 값에 대해 불평하지 않습니다.

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

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