오늘 포스팅 할 Angular 내용은 ngIf 디렉티브 와 ElementRef 상관관계에 대해서 다룹니다.




왜 ngIf 와 ElementRef 조합일까요?


ngIf 디렉티브를 사용하면, html element를 동적으로 추가/삭제를 구현하기가 편리합니다. 


무엇보다도, 가독성이 떨어지는 DOM API를 사용하는것 이 아닌, 직관적인 코드를 제공하는것이 큰 장점입니다.


하지만, DOM API를 피할 수 없는 순간도 존재합니다.


Angular는 DOM API를 ElementRef 라는 객체를 통해서 제공합니다. 


ElementRef는 HTML Element를 내부적으로 감싼 객체인데, 

보통 ViwChild 어노테이션이나, ViewChildren 어노테이션으로 참조합니다.


문제는 여기서 발생합니다.


ngIf 로 추가/삭제를 하는 HTML Element를 ElementRef 로 받았을 시,

ngIf 로 인한 추가/삭제 와 해당 ElementRef 를 참조하는것이 싱크가 되지 않는다.



해결 방법은?


다행히도, Angular가 제공해주는 API가 있습니다. 


ngIf와 ElementRef 의 싱크를 맞춰주기 위해 필요한 객체는 ChangeDetectorRef 입니다.


아래와 같이 TypeScript 생성자 문법으로 받아 올 수 있습니다. ( 컴포넌트 코드 안에서 작성하였습니다. )


받아 온 후, 싱크를 맞춰야할 메서드 안에서 detectChanges 메서드를 호출하면 됩니다.


1
2
3
4
5
6
7
8
9
10
11
constructor(private changeDetector : ChangeDetectorRef) {
    
}
 
//싱크를 맞추시고 싶은 곳에서
 
public click() : void {
  ...
  this.changeDetector.detectChanges();
  ...
}
cs




끝으로


프레임워크의 장점이자 단점은, 정해진 규칙과 틀을 이용해 개발을 한다는 점입니다.


가이드가 정확히 제시된 것들은 정말 빨리 배울수 있지만, 구현사항이 디테일 할 때 해당 프레임워크의 


이해도가 없다면 프레임워크를 직접 부딪히고 테스트 해봐야 할 것들이 많습니다.


특히 Angular 같이 아직 자료가 많이 없을시엔 더더욱 그렇습니다.


비슷한 이슈로 자료를 찾는 분에게, 본 포스팅으로 도움이 되셨으면 합니다.


감사합니다.

'Angular' 카테고리의 다른 글

Angular Context-Path 설정하기.  (2) 2018.04.04

포스팅이 도움 되셨다면, 커피 한잔 후원해주세요!
더 좋은 포스팅 작성에 큰 힘이 됩니다.

Buy me a coffeeBuy me a coffee

+ Recent posts