Angular2 - 즉시 바운드 속성 업데이트

Question

처음에는 간단한 질문이 있습니다. "Angular2의 바인딩이 언제 평가되고 업데이트 되었습니까?"

바운드 속성을 원한다면 소스가 설정되면 즉시 업데이트됩니다.

Plunker demo

그리고 코드의 가장 흥미로운 부분 :

이 매우 간단 plunker 데모가 동작을 보여줍니다

이

setValue() { 
    console.log(this.childComponent.prop); 
    this.propValue = "button clicked"; 
    //NOW I WANT TO GET THE NEW VALUE 
    console.log(this.childComponent.prop); 
} 

템플릿에 업데이트 된 보간 말한다 제대로 평가 바인딩 대상 속성은 업데이트되지만 때로는 setValue 메서드 범위 밖에서 나중에 업데이트됩니다.

왜 이런 동작이 필요합니까?

이 작업 방식은 구성 요소 상호 작용이 필요하지 않지만, ... 나는 더 복잡한 사용자 지정 양식 컨트롤 (ControlValueAccessor 구현)이 있습니다. 이제는 "비즈니스 프로세스"에 대해 작업하고 있습니다.이 복잡한 구성 요소의 ngModel은 일반적으로 객체의 서로 다른 부분에 영향을 줄 수있는 더 많은 구성 요소에서 액세스 할 수있는보다 복잡한 객체의 일부입니다.

간단한 예 :

모델 코드의 한편 다른 곳

{ 
public modelA: SomeClasss; <-- this is ngModel of comp. A 
public modelB: SomeClasss; {...} <-- this is ngModel of comp. B 
} 

다음 updateMagicUI 방법은 ComponentA의 내부 구조 작업 일부 복잡한 로직을 수행

update(X: SomeClass) { 
    this.modelA = X; 
    this.componentA.updateMagicUI(); 
} 

그것의 기반으로 새로 설정된 값. 이 논리는 값이 변경 될 때마다가 아니라 명시 적으로 호출되는 경우에만 실행하려고합니다.

Answer 1

한 가지 방법은 변경 감지를 트리거 this answer에서 제안 ApplicationRef의 tick 메소드를 호출하는 것입니다

이

import { ..., ApplicationRef } from '@angular/core' 
... 

export class App { 
    ... 
    constructor(private applicationRef: ApplicationRef) { 
    ... 
    } 
    setValue() { 
    console.log(this.childComponent.prop); 
    this.propValue = "button clicked"; 
    this.applicationRef.tick(); // Trigger change detection 
    console.log(this.childComponent.prop); 
    } 
} 

당신은 this plunker에서 테스트 할 수 있습니다.