다중 ng-콘텐츠

다중 ng-콘텐츠

다중 구성 요소를 사용하여 사용자 지정 구성 요소를 구축하려고 합니다.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. 다음을 사용하여 제외합니다.ng-content와 함께select와 같은 속성.select="[header]".

app.comp.sys

<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>

아동.중대.중대.중대.중대.

<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 디렉티브나 다른 용도로 예약된 속성과 같은 선택기의 속성을 피하는 것입니다.그래서 우리는 단지 "슬롯" 속성을 사용합니다.곧 알게 되겠지.<ng-content select="[slot=foobar]">~하듯이<slot name="foobar">.

예:

hello-world.component.vmdk

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

app.component.vmdk

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

결과

This is a Hello World demo.

스택블리츠 예제

"바나나"나 "물고기"처럼 원하는 이름을 사용할 수 있습니다.그러나 "시작"과 "끝"은 요소를 앞뒤에 배치하는 좋은 관습입니다.

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

app.comp.sys

<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>

아동.중대.중대.중대.중대.

<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.sys

<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>

아동.중대.중대.중대.중대.

<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그러나 이러한 방법 중 하나가 마음에 들지 않으면 다른 솔루션 중 하나를 사용해야 합니다.

다른 옵션으로 템플릿을 하위 구성 요소로 전달할 수 있습니다. 그러면 내용/템플릿에 값을 바인딩할 수 있습니다.

상위 구성 요소 html

<app-child
    [templateHeader]="header"
    [templateContent]="content">
</app-child>

<ng-template #header
     let-data="data"> < -- how you get dynamic data
     what ever you would like the header to say
     {{data}}
</ng-template>

<ng-template #content>
    what ever you would like the content to say or any other component
</ng-template>

하위 구성 요소

export class ChildComponent {
    @Input() templateHeader: TemplateRef<any>;
    @Input() templateContent: TemplateRef<any>;
}

하위 구성 요소 html

<div class="header-css-class">
    <ng-container
        *ngTemplateOutlet="
        templateHeader;
        context: {   , < -- if you want to pass data to your template
            data: data
        }">
    </ng-container>
</div>
<div class="content-css-class">
    <ng-container *ngTemplateOutlet="templateContent">
    </ng-container>
</div>

템플릿에 대한 자세한 설명은 이 훌륭한 기사 https://indepth.dev/dev/1405/ngtemplate 아울렛을 참조하십시오.

둘 이상의 구성 요소를 "승인"하려면 다음을 사용할 수 있습니다.

<ng-content select="custom-component,a"></ng-content>

이렇게 하면 사용자 지정 구성 요소와 앵커(a) 요소를 모두 사용할 수 있으며 시퀀스는 변경되지 않습니다.

언급URL : https://stackoverflow.com/questions/52638718/multiple-ng-content