Angular2 스터디 발표 자료
자식 엘리먼트의 호출과 탐색 방법
- @ViewChild 장식자를 이용
- @ViewChildren 장식자를 이용
- @ContentChild 장식자를 이용
- @ContentChildren 장식자를 이용

1. @ViewChild 장식자를 이용한 엘리먼트 상태 얻기

  • 템플릿에는 사용자가 정의한 지시자를 선언해 기능 구현이 가능.
  • 지시자는 템플릿 내에 선언돼 있기 때문에, 화면이 초기화 후 DOM에 지시자 정보가 저장됨
  • @ViewChild 선언 방법
import {ViewChild} from '@angular/core';
@ViewChild(클래스명)변수명: 클래스명;
  • 지시자의 DOM은 화면이 초기화되고 접근할 수 있기 때문에 아래와 같이 사용.
import {ViewChild} from '@angular/core';
@ViewChild(클래스명)
set selector(v:클래스명){
  setTimeout(()=>{.....},0);
}

2. @ViewChildren 장식자 이용

  • @ViewChild는 하나의 엘리먼트 상태를 취하지만, @ViewChildren는 여러 지시자를 한번에 탐색.
  • 선언 방법
@ViewChildren('설명 레이블') 변수명:QueryList<참조변수 자료형>;
  • QueryList는 변경되지 않는 리스트형, ngFor를 이용해 반복문 사용 가능
  • P.110 참조
  • 예제소스

3. @ContentChild 장식자 이용

  • 다른 곳에서 자신의 태그 사이에 넣어준 요소는 @ContentChild 이다.
  • 선언 방법
@ContentChild(클래스명)변수명:클래스명;

4. @ContentChildren 장식자 이용

  • 여러개의 지시자 정보를 관리
  • 선언 방법
@ContentChildren(클래스명)변수명:클래스명;