Saya mencoba membuat komponen khusus menggunakan beberapa ng-contentdi Angular 6, tetapi ini tidak berfungsi dan saya tidak tahu mengapa.

Ini adalah kode komponen saya:

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

Saya mencoba untuk menggunakan komponen ini di tempat lain dan membuat dua yang berbeda dalam kode HTML bodydan sundulan selectdari ng-content, sesuatu seperti ini:

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

Namun komponen tersebut dirender kosong.

Apakah kalian tahu apa yang mungkin saya lakukan salah atau apa cara terbaik untuk membuat dua bagian berbeda dalam komponen yang sama?

Terima kasih!

1. Anda dapat menambahkan atribut dummy headerdan bodysebagai lawan dari referensi template (#header, #body).
2. Dan transclude menggunakan ng-contentwith selectatribut like 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>

DEMO

Agar sesuai dengan spesifikasi Komponen Web . Bahkan jika itu Angular. Ini tentang menghindari atribut untuk pemilih seperti arahan Angular atau atribut yang dipesan dengan penggunaan lain. Jadi, kami hanya menggunakan atribut "slot". Kami akan melihat <ng-content select="[slot=foobar]">sebagai <slot name="foobar">.

Contoh:

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>

Hasil

This is a Hello World example.

Contoh Stackblitz

Anda bisa menggunakan nama apapun yang Anda inginkan seperti "banana" atau "fish". Tapi "mulai" dan "akhir" adalah kesepakatan yang baik untuk menempatkan elemen sebelum dan sesudah.

sebagai alternatif, Anda dapat menggunakan:

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>

Melengkapi jawaban lainnya:

Anda juga dapat melakukannya dengan tag kustom (seperti <ion-card>, <ion-card-header>, dan <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>

Anda akan mendapatkan pesan peringatan, tetapi itu akan berhasil. Anda dapat menyembunyikan pesan peringatan atau menggunakan tag yang dikenal seperti headeratau footer. Namun, jika Anda tidak menyukai salah satu metode ini, Anda harus menggunakan salah satu solusi lain.