ng-contentAngular 6에서 다중 을 사용하여 사용자 지정 구성 요소를 만들려고하는데 이것이 작동하지 않으며 이유를 모르겠습니다.

이것은 내 구성 요소 코드입니다.

<div class="header-css-class">
    <ng-content select="#header"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="#body"></ng-content>
</div>

이 구성 요소를 다른 장소에서 사용하고 다음과 같이 두 개의 다른 HTML 코드를 내부 body및 헤더 select에 렌더링하려고합니다 ng-content.

<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>

그러나 구성 요소가 공백으로 렌더링됩니다.

내가 뭘 잘못하고 있는지 또는 동일한 구성 요소에서 두 개의 다른 섹션을 렌더링하는 가장 좋은 방법이 무엇인지 알고 있습니까?

감사!

1. 템플릿 참조 header와 body는 반대로 더미 속성을 추가 할 수 있습니다 (#header, #body).
2. 그리고 사용 transclude ng-content과 select같은 속성 select="[header]".

app.comp.html

<app-child>
    <div header >This should be rendered in header selection of ng-content</div>
    <div body >This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="[body]"></ng-content>
</div>

데모

웹 구성 요소 사양에 맞 춥니 다 . 그것이 Angular라도. Angular 지시문과 같은 선택기 속성이나 다른 용도로 예약 된 속성을 피하는 것입니다. 따라서 "slot"속성 만 사용합니다. 우리는 볼 수 있습니다 <ng-content select="[slot=foobar]">로 <slot name="foobar">.

예:

hello-world.component.html

<ng-content select="[slot=start]"></ng-content>
<span>Hello World</span>
<ng-content select="[slot=end]"></ng-content>

app.component.html

<app-hello-world>
  <span slot="start">This is a </span>
  <span slot="end"> example.</span>
</app-hello-world>

결과

This is a Hello World example.

Stackblitz 예

"banana"또는 "fish"와 같이 원하는 이름을 사용할 수 있습니다. 그러나 "시작"과 "끝"은 요소를 앞뒤에 배치하는 좋은 규칙입니다.

또는 다음을 사용할 수 있습니다.

app.comp.html

<app-child>
    <div role="header">This should be rendered in header selection of ng-content</div>
    <div role="body">This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="div[role=header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="div[role=body]"></ng-content>
</div>

다른 답변 보완 :

사용자 정의 태그 (예 <ion-card>: <ion-card-header>,, <ion-card-content>) 로도 수행 할 수 있습니다 .

app.comp.html

<app-child>
    <app-child-header>This should be rendered in header selection of ng-content</app-child-header>
    <app-child-content>This should be rendered in content selection of ng-content</app-child-content>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="app-child-header"></ng-content>
</div>
<div class="content-css-class">
    <ng-content select="app-child-content"></ng-content>
</div>

경고 메시지가 표시되지만 작동합니다. 당신은 경고 메시지를 표시하거나 할 수 알려진 태그를 사용하는 등 header나 footer. 그러나 이러한 방법이 마음에 들지 않으면 다른 솔루션 중 하나를 사용해야합니다.