화면 변경사항 감지하기

lee jae hwan·2022년 9월 6일

앵귤러

목록 보기
31/83

하위컴포넌트의 데이터가 변경되었을때는 상위컴포넌트에서 참조변수로 다루어 랜더링하면 된다.

하위뷰에서 상위뷰에 영향을 준다면 단방향데이터흐름을 이기게 되어 예상한대로 랜더링되지 않을 수 있다.

따라서 하위뷰에서 상위뷰로 전달되는 뷰를 만들어 내려면 이 변화를 반영하는 변화감지 사이클을 새로 생성시켜야 한다.


예를들어 하위컴포넌트내 입력필드에 포커스인하고 포커스아웃되면 ngAfterViewChecked메소드가 호출되고 입력값이 변하면 당연히 ngAfterViewChecked가 호출된다.

따라서 ngAfterViewChecked메소드에서 프로퍼티변화를 LoggerService에 등록하면 상위컴포넌트에서 LoggerService 데이터를 사용하여 뷰를 갱신한다.

ngAfterViewChecked메소드는 자주 발생하기때문에 간단한 로직만 사용해야 한다.


하위컴포넌트의 상태변화를 감지하려면 하위컴포넌트의 클래스인스턴스를 얻은후 프로퍼티를 검사해야 한다.

@ViewChild(ChildViewComponent) viewChild!: ChildViewComponent;

0개의 댓글