Aurelia - Elemen Kustom

Aurelia menawarkan cara untuk menambahkan komponen secara dinamis. Anda dapat menggunakan kembali satu komponen di berbagai bagian aplikasi Anda tanpa perlu menyertakan HTML beberapa kali. Dalam bab ini, Anda akan belajar bagaimana mencapai ini.

Langkah 1 - Buat Komponen Kustom

Mari buat yang baru components direktori di dalam src map.

C:\Users\username\Desktop\aureliaApp\src>mkdir components

Di dalam direktori ini, kami akan membuat custom-component.html. Komponen ini nantinya akan disisipkan di halaman HTML.

custom-component.html

<template>
   <p>This is some text from dynamic component...</p>
</template>

Langkah 2 - Buat Komponen Utama

Kami akan membuat komponen sederhana di app.js. Ini akan digunakan untuk merenderheader dan footer teks di layar.

app.js

export class MyComponent {
   header = "This is Header";
   content = "This is content";
}

Langkah 3 - Tambahkan Komponen Kustom

Di dalam kami app.html mengajukan, kita perlu require itu custom-component.htmluntuk dapat memasukkannya secara dinamis. Setelah kami melakukannya, kami dapat menambahkan elemen barucustom-component.

app.html

<template>
   <require from = "./components/custom-component.html"></require>

   <h1>${header}</h1>
   <p>${content}</p>
   <custom-component></custom-component>
</template>

Berikut adalah keluarannya. Header dan Footer teks dirender dari myComponent dalam app.js. Teks tambahan dirender daricustom-component.js.