각도 2 하위 구성 요소를 검출하지 않은 변경 예 올바르게

Question

Plunker : https://plnkr.co/edit/aWUE54EUMIm8rnw3PZOO?p=preview

먼저 버튼의 값을 증가시킨다. 값이 10보다 작 으면 버튼을 활성화해야합니다. 그렇지 않으면 버튼이 비활성화됩니다. 두 번째 버튼은 모든이의 확인을 찾고있는 경우에도 0

this.button1 = new ButtonAction(
    "info", 
    "check", 
    "right", 
    "Click me!", 
    "medium", 
    true, 
    true, 
    new Command(
    () => this.val += 1, 
    () => { 
     return this.val < 10; 
    } 
), 
    false 
); 

this.button2 = new ButtonAction(
    "info", 
    "check", 
    "right", 
    "Reset first button!", 
    "medium", 
    true, 
    true, 
    new Command(
    () => this.val = 0, 
    null 
), 
    false 
); 

값이 첫 번째 단추가 실제로 자체를 비활성화 (10)에 도달에 값을 재설정하지만이 값을 0으로 재설정 할 때이 업데이트되지 않습니다 출력 :

Marked for check with value 7 
btnClass: btn btn-outline-info btn-block 
isDisabled: false 
Marked for check with value 8 
btnClass: btn btn-outline-info btn-block 
isDisabled: false 
Marked for check with value 9 
btnClass: btn btn-outline-info btn-block 
isDisabled: false 
Marked for check with value 10 
btnClass: btn btn-outline-info btn-block disabled 
isDisabled: true 
Marked for check with value 0 
btnClass: btn btn-outline-info btn-block 
isDisabled: false 

이 값이 설정 방법은 다음과 같습니다

set val(v: number){ 
    this._val = v; 
    console.log("Marked for check with value "+this._val); 
    //this.cd.markForCheck(); 
    this.cd.detectChanges(); 
} 

markForCheck 중 하나 그래서 나는 정말 일 핸들을 제외하고 무엇을 모르는 작동하지 않습니다

e DOM 자신을 통해 ElementRef (이미 그것을 시도하고 그것을 작동),하지만 난 정말 이렇게 싶지 않아 =)

나는 문제를 감지하려고 노력하고 생성 된 팩토리 클래스가 이전 값을 비교하는 것 같아요 buttonClasses는 현재와 함께 작동하고 btn btn-outline-info btn-block에서 btn btn-outline-info btn-block disabled으로 갈 때 작동하지만 그 반대의 경우는 작동하지 않습니다.

그림은 두 번째 버튼으로 값을 재설정 할 때와 처음에 buttonClasses가 호출 될 때 발생하는 상황을 보여줍니다.

self._expr_2는 이전 값이며 btn btn-outline-info btn-block이다 그러나 또한 disabled이 있어야합니다. 현재 값은 disabled 클래스가 올바르지 않습니다.

도움을 미리 감사드립니다. 나는 진짜로 여기에서 무엇을 해야할지 모르겠다. ...

Answer 1

ChangeDetectionStrategy.OnPush 전략으로 당신은 cd.markForCheck API 방법을 호출해야한다.

가장 중요한 것은 : 루트가 다음 변경 감지 실행에 대해 검사 할 때까지

그것은 우리의 구성 요소의 경로를 표시합니다.

그래서 당신은 당신의 행동 후 만에 하나 개의 버튼을 작동하여 UIButtonChangeDetectorRefs 그렇지 않으면 변경 감지에 발사 할 필요가있다.

angular2가 탐지를 변경하면 언제든지 변경 후 확인 표시된 것으로 표시됩니다.

UIButton.ngfactory : 여기

는 angular2 핸들 이벤트를 클릭하는 방법입니다.JS 라인에서

_View_UIButton0.prototype._handle_click_1_0 = function($event) { 
    var self = this; 
    self.markPathToRootAsCheckOnce(); 
    self.debug(1,3,14); 
    var pd_0 = (self.context.clicked() !== false); 
    return (true && pd_0); 
}; 

에주의 : 그것은 현재 버튼을 표시

self.markPathToRootAsCheckOnce(); 

은 확인,하지만 두 번째 버튼은 ChangeDetectorStatus.Checked 상태로 유지되며 일어날 검사 할 때 생략.

그래서 해결책은 다음과 같습니다

1)있는 UIButton 구성 요소

constructor(public cd: ChangeDetectorRef) {} 

2) 응용 프로그램 구성 요소

@ViewChildren(UIButton) buttons: QueryList<UIButton>; 

set val(v: number){ 
    this._val = v; 
    console.log("Marked for check!"); 
    this.buttons.toArray().forEach(btn => btn.cd.markForCheck()); 
} 

버튼이 모두

참조를 확인한다이 방법을 행동 중임 Plunker

희망이 당신을 돕는다!