@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';
@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)
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
