Angular의 다중 슬롯?

Angular의 흥미로운 개념 중 하나는 다음과 같습니다.

Content Projection: pattern in which you insert, or project, the content you want to use inside another component

이 개념은 HTML 표준의 일부로 존재하며 다음과 같이 알려져 있습니다.

Slot: placeholder inside a web component that you can fill with your own markup, which lets you create separate DOM trees and present them together.

Content Projection은 Angular 지시어 이름을 ng-content로 사용하여 수행할 수 있으며 두 가지 주요 방법이 있습니다.

단순한

구성 요소는 단일 소스의 콘텐츠를 허용합니다.

구성 요소 정의

Let's load some additional content:

<ng-content></ng-content>

용법

<app-simple-content>
  <p>This is a test</p>
</app-simple-content>

DOM 트리에서 <p>가 <app-simple-content>의 자식 노드로서 렌더러인 방법을 관찰할 수 있습니다.

다수의

구성 요소는 여러 소스의 콘텐츠를 허용합니다.

구성 요소 정의

<p>Let's load the main content:</p>
<ng-content select="[main]"></ng-content>
<p>Let's load some extra content:</p>
<ng-content select="[extra]"></ng-content>
<p>Let's load default content:</p>
<ng-content></ng-content>

1개로 사용

<app-multi-content>
  <span extra>EXTRA</span>
</app-multi-content>

EXTRA 공간을 차지하는 DOM 트리에서 <span>가 <app-multi-content>의 자식 노드로서 어떻게 렌더러인지 관찰할 수 있습니다.

모두와 함께 사용

<app-multi-content>
  <span main>MAIN</span>
  <span extra>EXTRA</span>
  <span>DEFAULT</span>
</app-multi-content>

서로 다른 <span> 렌더러가 자체 공간을 차지하는 DOM 트리에서 <app-multi-content>의 자식 노드로 어떻게 나타나는지 관찰할 수 있습니다.




콘텐츠 투영을 사용하면 Composite Pattern 적용을 위한 문이 열립니다.

The composite pattern describes a group of objects that are treated the same way as a single instance of the same type of object. The intent of a composite is to "compose" objects into tree structures to represent part-whole hierarchies.

전체 예

자세한 구현은 내Github repos 중 하나에 있습니다.