[angular] @Input () 값이 Angular에서 언제 변경되는지 감지하는 방법은 무엇입니까?

실제로 angular2 +에서 하위 구성 요소의 입력이 변경 될 때이를 감지하고 작동하는 두 가지 방법이 있습니다.

1. 이전 답변에서 언급 한 것처럼 ngOnChanges () 수명주기 메소드 를 사용할 수 있습니다 .

    @Input() categoryId: string;

    ngOnChanges(changes: SimpleChanges) {

        this.doSomething(changes.categoryId.currentValue);
        // You can also use categoryId.previousValue and 
        // categoryId.firstChange for comparing old and new values

    }

문서 링크 : ngOnChanges, SimpleChanges, SimpleChange
Demo 예 : 이 플런저를보십시오

2. 또는 다음과 같이 입력 특성 설정기를 사용할 수도 있습니다 .

    private _categoryId: string;

    @Input() set categoryId(value: string) {

       this._categoryId = value;
       this.doSomething(this._categoryId);

    }

    get categoryId(): string {

        return this._categoryId;

    }

설명서 링크 : 여기를 참조하십시오 .

데모 예 : 이 플 런커를보십시오 .

어떤 접근법을 사용해야합니까?

컴포넌트에 여러 개의 입력이있는 경우 ngOnChanges ()를 사용하면 ngOnChanges () 내에서 모든 입력에 대한 모든 변경 사항을 한 번에 가져옵니다. 이 방법을 사용하면 변경된 입력의 현재 값과 이전 값을 비교하고 그에 따라 조치를 취할 수 있습니다.

그러나 특정 단일 입력 만 변경하고 다른 입력에 신경 쓰지 않을 때 무언가를 수행하려는 경우 입력 속성 설정기를 사용하는 것이 더 간단 할 수 있습니다. 그러나이 방법은 변경된 입력의 이전 값과 현재 값을 비교할 수있는 기본 방법을 제공하지 않습니다 (ngOnChanges 수명주기 방법으로 쉽게 수행 할 수 있음).

2017-07-25 편집 : 각도 변경 감지로 인해 일부 상황에서 여전히 화재가 발생하지 않을 수 있음

일반적으로 setter 및 ngOnChanges 모두에 대한 변경 감지 는 데이터가 JS 기본 데이터 유형 (string, number, boolean) 이면 상위 구성 요소가 하위 컴포넌트로 전달하는 데이터를 변경할 때마다 실행됩니다 . 그러나 다음 시나리오에서는 실행되지 않으며 작동하려면 추가 조치를 취해야합니다.

1. JS 프리미티브 데이터 유형 대신 중첩 객체 또는 배열을 사용하여 부모에서 자식으로 데이터를 전달하는 경우 사용자의 답변에서 언급했듯이 변경 감지 (setter 또는 ngchanges 사용)가 발생하지 않을 수 있습니다 (muetzerich). 해결책은 여기를 참조하십시오 .

2. 각도 컨텍스트 외부에서 데이터를 변경하는 경우 (즉, 외부에서) 각도는 변경 사항을 알 수 없습니다. 외부 변경을 각도로 인식하여 변경 감지를 트리거하려면 구성 요소에서 ChangeDetectorRef 또는 NgZone을 사용해야 할 수도 있습니다. 이것을 참조하십시오 .

답변

ngOnChanges(changes: any) {
    console.log(changes.myInput.currentValue);
}

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SyncService {

    private thread_id = new Subject<number>();
    thread_id$ = this.thread_id.asObservable();

    set_thread_id(thread_id: number) {
        this.thread_id.next(thread_id);
    }

}

export class ConsumerComponent implements OnInit {

  constructor(
    public sync: SyncService
  ) {
     this.sync.thread_id$.subscribe(thread_id => {
          **Process Value Updates Here**
      }
    }

  selectChat(thread_id: number) {  <--- How to update values
    this.sync.set_thread_id(thread_id);
  }
}

  @Input()
  public set categoryId(categoryId: number) {
      console.log(categoryId)
  }

service.ts
public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);

-----------------
CategoryComponent.ts
public onCategoryChange(): void {
  service.categoryChange$.next();
}

-----------------
videoListComponent.ts
public ngOnInit(): void {
  service.categoryChange$.subscribe(() => {
   // do your logic
});
}