ฉันกำลังพยายามสร้างส่วนประกอบที่กำหนดเองโดยใช้หลาย ๆ ตัวng-contentใน Angular 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กับแอตทริบิวต์เช่นselectselect="[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>

การสาธิต

เพื่อให้เหมาะสมกับข้อกำหนดของWeb Component แม้ว่าจะเป็น 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

คุณจะใช้ชื่ออะไรก็ได้เช่น "กล้วย" หรือ "ปลา" แต่ "เริ่ม" และ "สิ้นสุด" เป็นแบบแผนที่ดีในการวางองค์ประกอบก่อนและหลัง

หรือคุณสามารถใช้:

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อย่างไรก็ตามหากคุณไม่ชอบวิธีใด ๆ เหล่านี้คุณควรใช้วิธีแก้ปัญหาอื่น ๆ