Angular(각도)에서 수동으로 변경 감지 트리거

Angular(각도)에서 수동으로 변경 감지 트리거

나는 속성을 가진 Angular 구성 요소를 쓰고 있습니다.Mode(): string.

이 속성은 어떤 이벤트에도 응답하지 않고 프로그래밍 방식으로 설정할 수 있습니다.

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

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

다음 중 하나를 사용해 보십시오.

• ApplicationRef.tick() Angular와 유사한제이에스$rootScope.$digest()즉, 전체 구성 요소 트리를 확인합니다.
• NgZone.run(callback) 와 비슷한.$rootScope.$apply(callback)즉, Angular 영역 내의 콜백 함수를 평가합니다.콜백 기능을 실행한 후 전체 구성 요소 트리를 확인하는 것으로 끝나는 것 같습니다.
• ChangeDetectorRef.detectChanges() 와 비슷한.$scope.$digest()즉, 이 구성 요소와 하위 구성 요소만 확인합니다.

주입할 수 있습니다.ApplicationRef,NgZone또는ChangeDetectorRef사용자의 구성 요소로.

승인된 답변 참조를 사용했으며 예를 들어 Angular 2 문서는 읽기가 매우 어렵기 때문에 이것이 더 쉬웠으면 합니다.

1. 수입품NgZone:

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

2. 클래스 생성자에 추가

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

3. 실행 코드:zone.run:

   this.zone.run(() => this.donations = donations)
   

마크포체크()로 업데이트 할 수 있었습니다.

변경 디텍터 참조 가져오기

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

주입 및 인스턴스화

constructor(private ref: ChangeDetectorRef) { 
}

마지막으로 변경 감지를 수행하도록 표시합니다.

this.ref.markForCheck();

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

https://plnkr.co/edit/RfJwHqEVJcMU9ku9XNE7?p=preview

편집: 이 예는 더 이상 문제를 묘사하지 않습니다 :( 나는 그것이 수정된 새로운 Angular 버전을 실행하고 있을 것이라고 믿습니다.

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

Angular 2+에서 @Input decorator를 사용합니다.

부모 구성 요소와 자식 구성 요소 간에 적절한 속성 바인딩을 허용합니다.

먼저 부모에 글로벌 변수를 만들어 자식에게 전달될 개체/속성을 보유합니다.

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

그런 다음 하위 템플릿이 사용되는 상위 html에서 하위 변수의 이름으로 대괄호 표기법을 추가한 다음 상위 변수의 이름과 동일하게 설정합니다.예:

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

마지막으로 자식 구성 요소에서 자식 특성이 정의된 경우 입력 장식기를 추가합니다.

@Input()
public childVariable: any

상위 변수가 업데이트되면 하위 구성 요소에 업데이트를 전달해야 합니다. 그러면 html이 업데이트됩니다.

또한 하위 구성 요소에서 기능을 트리거하려면 onChanges를 살펴봅니다.

언급URL : https://stackoverflow.com/questions/34827334/triggering-change-detection-manually-in-angular