앵귤러 ViewChildren과 ContentChildren의 차이

 

 

View로 시작하는 하위요소 탐색 기능과 Content로 시작하는 탐색기능의 차이를 익히느라 조금 해맸었다.
ViewChildren으로 시작하는 요소는 자신의 테그 안에 있는 하위 엘리먼트에만 적용이 된다.
즉, 자기 노드의 자식을 탐색하는 기능이다.
아래 소스코드를 보면,

--Html 내용--

<p>
  parent works!
</p>
<children><div>-1111-</div></children>
<ng-content></ng-content>
--Html 내용--

import { Component, ViewChildren, ElementRef,QueryList, ContentChildren, ContentChild,OnInit } from '@angular/core';
import {ImChildrenComponent} from '../im-children/im-children.component';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  @ViewChildren(ImChildrenComponent) child : QueryList<ImChildrenComponent>; //바로밑에 자식값을 가져오는 바인딩
  ngAfterViewInit(): void {
    console.log(this.child);
  }
}

 

여기서 가져올수 있는 엘리먼트는 p테그, children테그 값이다.
예제코드에서는 children 테그의 값만 가져오게 되어 있다.

ContentChildren은 자신의 테그에 어떠한 대상이 들어왔을때, 즉 ng-content로 객체가 생성된 값을 가져올 수 있다.

---------- 최상위 노드 테그 ---------- 
<div style="text-align:center">
 <app-parent>
    <div #div>1111</div>
 </app-parent>
</div>

---------- 하위 노드 테그 ---------- 
<p>
  parent works!
</p>
<children><div>-1111-</div></children>
<ng-content></ng-content>

import { Component, ViewChildren, ElementRef,QueryList, ContentChildren, ContentChild,OnInit } from '@angular/core';
import {ImChildrenComponent} from '../im-children/im-children.component';
@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  @ContentChildren('div') list : QueryList<any>;  //ng-content로 받은 값을 가져오는 바인딩
  ngAfterViewInit(): void {
    console.log(this.list);
  }
}

위 코드처럼 app-parent에 div테그가 삽입되면 ContentChildren 으로 해당 값을 가져오는 것이다.
ContentChildren이나 ViewChildren은 리스트 형식으로 결과를 리턴하는 기능이고 여기서 ren을 빼면 단일 값을 가져오는 기능이다.