@ViewChild

자식 엘리먼트와 같이 캡슐화되어 있는, 템플릿의 경우 템플릿이 그려진 이후에 참조가 가능하다. 이때 @ViewChild를 이용하면 템플릿이 만들어지기 전에 참조 가능하다.

지시자는 템플릿 내에 선언돼 있기 때문에(쉐도우 DOM), 초기화 되고 나서 지시자 정보를 얻을 수 있다. 때문에 @ViewChild와 setTimeout()함수를 이용해 상태정보를 알아냄.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import {AfterViewInit, Component, Directive, Input, ViewChild} from '@angular/core';

// 지시자의 속성값은 DOM 생성 후 알 수 있음.
@Directive({ selector: 'item' })
export class Item {
@Input() status: boolean;
}

@Component({
selector: 'item-component',
template: '<button>알림창</button>'
})
export class ItemComponent {
display(){
alert('ItemComponent입니다');
}
}

@Component({
selector: 'app-view-child',
template: `
<item status="false" *ngIf="isShow==false"></item>
<item status="true" *ngIf="isShow==true"></item>
<button (click)="toggle()">선택</button><br>
isShow : {{isShow}}<br>
status : {{status}}<br>
<item-component (click)="display()"></item-component>`
})
export class ViewchildComponent {

//@ViewChild를 통해 첫번째 item 엘리먼트를 가져옴.
@ViewChild(Item)
set item(v: Item) {
setTimeout(() => { this.status = v.status; }, 0);
}

@ViewChild(ItemComponent) itemComponent: ItemComponent;
isShow: boolean = true;
status: boolean;

toggle() {
this.isShow = !this.isShow;
}

display(){
this.itemComponent.display();
}
}

@ViewChildren

@ViewChildren(‘설명 레이블’) children:QueryList<참조 변수의 형>;

복수개의 캡슐화된 엘리먼트(쉐도우 Dom)를 참조한다.

1
2
3
4
5
6
7
8
...
<child-cmp #child1 [childname]="'자식1'"></child-cmp>
<child-cmp #child2 [childname]="'자식2'"></child-cmp>
<child-cmp #child3 [childname]="'자식3'"></child-cmp>
...
export class ViewchildrenComponnet {
@ViewChildren('child1,child2,child3') children:QueryList<ChildCmp>;
}

번외

  • @ContentChild : DOM의 단수 개의 엘리먼트 가져오기

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

  • @ContentChildren : DOM의 복수 개의 엘리먼트 가져오기

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

Reference

쉽고 빠르게 배우는 Angular2 프로그래밍 - 정진욱

@ViewChild와 @ConentChild의 차이 http://stackoverflow.com/questions/34326745/whats-the-difference-between-viewchild-and-contentchild

Comment and share

Author's picture

Junho Nam

enjoy while living


full stack web developer


Seoul, Korea