자식 엘리먼트의 호출과 탐색

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);
}

• P.107 참조
• 예제소스

2. @ViewChildren 장식자 이용

• @ViewChild는 하나의 엘리먼트 상태를 취하지만, @ViewChildren는 여러 지시자를 한번에 탐색.
• 선언 방법

@ViewChildren('설명 레이블') 변수명:QueryList<참조변수 자료형>;

• QueryList는 변경되지 않는 리스트형, ngFor를 이용해 반복문 사용 가능
• P.110 참조
• 예제소스

3. @ContentChild 장식자 이용

• 다른 곳에서 자신의 태그 사이에 넣어준 요소는 @ContentChild 이다.
• 선언 방법

@ContentChild(클래스명)변수명:클래스명;

• P.113 참조
• 예제소스

4. @ContentChildren 장식자 이용

• 여러개의 지시자 정보를 관리
• 선언 방법

@ContentChildren(클래스명)변수명:클래스명;

• P.115 참조
• 예제소스