Angular @ContentChildren

@ContentChildren 데코레이터는 QueryList를 사용하여 컴포넌트 템플릿의 콘텐츠 영역에서 특정 조건을 만족하는 자식 요소들을 선택하는 데 사용됩니다. @ContentChildren는 부모 컴포넌트가 자식 컴포넌트의 템플릿 내에서 요소를 선택하고자 할 때 유용합니다.

다음은 @ContentChildren와 QueryList를 사용한 코드 예시들입니다.

예시 1: 자식 컴포넌트의 선택

import { Component, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'parent-component',
  template: `
    <div>
      <h1>Parent Component</h1>
      <ng-content></ng-content>
    </div>
  `,
})
export class ParentComponent implements AfterContentInit {
  @ContentChildren(ChildComponent) children: QueryList<ChildComponent>;

  ngAfterContentInit() {
    this.children.map(child => {
      // 자식 컴포넌트와 상호작용하는 로직을 작성합니다.
      // 예: child.doSomething();
    });
  }
}

위의 예시에서 ParentComponent는 ChildComponent를 선택하기 위해 @ContentChildren(ChildComponent)를 사용합니다. 부모 컴포넌트의 템플릿에 <ng-content></ng-content>를 사용하여 자식 컴포넌트를 포함하고 있습니다. @ContentChildren는 템플릿의 콘텐츠 영역에서 ChildComponent를 선택하고 해당하는 자식 컴포넌트들을 QueryList 객체인 children에 할당합니다.

ngAfterContentInit() 메서드는 부모 컴포넌트의 템플릿 콘텐츠가 초기화된 후에 실행됩니다. 이 메서드에서 children 객체에 대해 map 루프를 돌며 자식 컴포넌트들과 상호작용하는 로직을 작성할 수 있습니다.

예시 2: 템플릿 참조 변수를 사용한 선택

import { Component, ContentChildren, QueryList, AfterContentInit, ElementRef } from '@angular/core';

@Component({
  selector: 'parent-component',
  template: `
    <div>
      <h1>Parent Component</h1>
      <div #item class="child-item">Item 1</div>
      <div #item class="child-item">Item 2</div>
      <div #item class="child-item">Item 3</div>
    </div>
  `,
})
export class ParentComponent implements AfterContentInit {
  @ContentChildren('item', { read: ElementRef }) items: QueryList<ElementRef>;

  ngAfterContentInit() {
    this.items.map(item => {
      console.log(item.nativeElement.textContent);
    });
  }
}

위의 예시에서 ParentComponent는 @ContentChildren('item', { read: ElementRef })를 사용하여 item이라는 템플릿 참조 변수로 정의된 요소들을 선택합니다. read 옵션을 사용하여 선택된 요소들이 ElementRef로 읽히도록 지정합니다.

ngAfterContentInit() 메서드에서 items 객체에 대해 map 루프를 돌며 선택된 요소들의 텍스트 내용을 콘솔에 출력합니다.

이와 같이 @ContentChildren를 사용하면 부모 컴포넌트가 자식 컴포넌트의 템플릿 내에서 요소를 선택하고 필요에 따라 조작할 수 있습니다. QueryList를 사용하여 선택된 요소들을 반복하고 필터링하는 작업을 수행할 수 있습니다.