[angular] Angular에서 수동으로 변경 감지 트리거

속성이있는 Angular 구성 요소를 작성하고 있습니다 Mode(): string.

이벤트에 응답하지 않고 프로그래밍 방식 으로이 속성을 설정할 수 있기를 바랍니다.

문제는 브라우저 이벤트 {{Mode}}가 없으면 템플릿 바인딩 이 업데이트되지 않는다는 것입니다.

이 변경 감지를 수동으로 트리거하는 방법이 있습니까?

다음 중 하나를 시도하십시오.

ApplicationRef.tick()-AngularJS와 유사합니다. $rootScope.$digest()즉, 전체 컴포넌트 트리를 확인하십시오.
NgZone.run(callback)– 유사 $rootScope.$apply(callback)– 즉, 각 영역 내부의 콜백 함수를 평가합니다. 나는 이것이 콜백 함수를 실행 한 후 전체 구성 요소 트리를 검사하게된다고 확신하지는 않습니다.
ChangeDetectorRef.detectChanges()-유사 $scope.$digest()-즉,이 컴포넌트와 그 하위 요소 만 확인

당신은 삽입 할 수 ApplicationRef, NgZone또는 ChangeDetectorRef구성 요소에.

허용 된 답변 참조를 사용했으며 Angular 2 설명서를 읽기가 매우 어렵 기 때문에 예제를 작성하고 싶습니다.

수입 NgZone:

import { Component, NgZone } from '@angular/core';

클래스 생성자에 추가

constructor(public zone: NgZone, ...args){}

다음을 사용하여 코드를 실행하십시오 zone.run.
```
this.zone.run(() => this.donations = donations)
```

markForCheck () 로 업데이트 할 수있었습니다.

ChangeDetectorRef 가져 오기

import { ChangeDetectorRef } from '@angular/core';

주입하고 인스턴스화

constructor(private ref: ChangeDetectorRef) {
}

마지막으로 마크 변경 감지

this.ref.markForCheck();

다음은 markForCheck ()가 작동하고 detectChanges ()가 작동하지 않는 예입니다.

편집 :이 예제는 더 이상 문제를 묘사하지 않습니다 🙁 문제가 해결 된 최신 Angular 버전을 실행하고 있다고 생각합니다.

(STOP / RUN을 눌러 다시 실행하십시오)

Angular 2+에서 @Input 데코레이터를 사용해보십시오

부모와 자식 구성 요소 사이에 좋은 속성 바인딩을 허용합니다.

먼저 부모에게 전역 변수를 생성하여 자식에게 전달 될 객체 / 속성을 담습니다.

그런 다음 자식에서 전역 변수를 만들어 부모에서 전달 된 개체 / 속성을 유지합니다.

그런 다음 하위 템플리트가 사용되는 상위 HTML에서 하위 변수 이름으로 대괄호 표기법을 추가 한 다음 상위 변수 이름과 동일하게 설정하십시오. 예:

<child-component-template [childVariable] = parentVariable>
</child-component-template>

마지막으로 자식 속성이 자식 구성 요소에 정의되어 있으면 입력 데코레이터를 추가하십시오.

@Input()
public childVariable: any

부모 변수가 업데이트되면 업데이트가 자식 구성 요소로 전달되어 html이 업데이트됩니다.

또한 자식 구성 요소에서 함수를 트리거하려면 ngOnChanges를 살펴보십시오.

ChangeDetectorRef.detectChanges ()-$ scope. $ digest ()와 유사합니다. 즉,이 구성 요소와 해당 하위 항목 만 확인하십시오.