Angular: 콘텐츠 프로젝션 엔드투엔드

콘텐츠 프로젝션은 다른 구성 요소 안에 표시하려는 콘텐츠를 삽입하는 패턴입니다.
<ng-content></ng-content> - 다른 구성 요소 내부에 콘텐츠를 투사하는 책임이 있습니다. 단지 자리 표시자일 뿐이며 실제 예상 콘텐츠로 대체됩니다.

Angular에서 이를 수행하는 방법에는 여러 가지가 있습니다.

단일 슬롯 콘텐츠 프로젝션: 다른 구성 요소는 단일 소스의 콘텐츠를 허용합니다.

<!--app.component.html-->
<app-child>
<p>project this content</p>
</app-child>

<!--child.component.html-->
<p>Single-slot content projection</p>
<ng-content></ng-content>

산출:

다중 슬롯 콘텐츠 프로젝션: 구성 요소는 여러 소스의 콘텐츠를 허용합니다. 따라서 콘텐츠를 투사할 위치를 지정해야 합니다. select의 <ng-content> 속성으로 이 작업을 수행할 수 있습니다.

<!--app.component.html-->
<app-child>
<p> First project content </p>
<p select="[foo]"> foo project content </p>
<p select="[bar]"> bar project content </p>
<p> Lastly projected content </p>
</app-child>

<!--child.component.html-->
<h2>Multi-slot content projection</h2>
<ng-content></ng-content>
<ng-content #foo></ng-content>
<ng-content #bar></ng-content>

산출:



참고: 선택 특성이 없는 요소는 다른 요소와 일치하지 않는 모든 투영된 구성 요소를 받습니다.

위에서 관찰한 경우 Lastly projected content에는 select가 없지만 여전히 빈ng-content을 통해 투영됩니다.

조건부 콘텐츠 프로젝션: <ng-template> 및 ngTemplateOutlet 지시문을 사용하여 달성했습니다.

<h2>Conditional Content Projection</h2>

<p>Basic Template outlet Implementation</p>

<ng-template #template1>
  <p>template info</p>
</ng-template>

<p>It prints before templateInfo</p>

<ng-container *ngTemplateOutlet="template1"> </ng-container>

ngTemplateOutlet는 DOM의 다양한 섹션에 ng-template를 삽입하는 데 사용되는 구조적 지시문입니다.

사용자는 div와 같은 모든 요소를 ​​사용할 수 있습니다. 그러나 div는 렌더링되지 않습니다.

 <div *ngTemplateOutlet="template1"></div>

산출:


ngTemplateOutlet 속성을 사용하여 ngTemplateOutletContext에 값을 전달할 수도 있습니다.

<p>Passing value to template outlet</p>

<ng-template let-value="value" #template2>
  <p>Value recieved: {{ value }}</p>
</ng-template>

<ng-container
  [ngTemplateOutlet]="template2"
  [ngTemplateOutletContext]="{ value: 100 }"
>
</ng-container>

<!--Alternatively-->
<ng-container
  *ngTemplateOutlet="template2; context: { value: 100 }"
></ng-container>

여러 값을 보낼 수도 있습니다.

산출:



여기에서 전체 출력을 볼 수 있습니다.

angular-ivy-ym33ea.stackblitz.io


내가 어떤 경우를 다루지 않으면 알려주십시오.

당신은 나를 따라 오셔도 돼요:

감사