Aurelia - Özel Öğeler

Aurelia, bileşenleri dinamik olarak eklemenin bir yolunu sunuyor. HTML'yi birden çok kez eklemenize gerek kalmadan tek bir bileşeni uygulamanızın farklı bölümlerinde yeniden kullanabilirsiniz. Bu bölümde, bunu nasıl başaracağınızı öğreneceksiniz.

Adım 1 - Özel Bileşeni Oluşturun

Yeni yaratalım components dizin içinde src Klasör.

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

Bu dizinin içinde oluşturacağız custom-component.html. Bu bileşen daha sonra HTML sayfasına eklenecektir.

custom-component.html

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

Adım 2 - Ana Bileşeni Oluşturun

Basit bir bileşen oluşturacağız app.js. Oluşturmak için kullanılacakheader ve footer ekrandaki metin.

app.js

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

3. Adım - Özel Bileşeni Ekleyin

Bizim içinde app.html dosya, ihtiyacımız var require custom-component.htmldinamik olarak ekleyebilmek. Bunu yaptıktan sonra yeni bir öğe ekleyebilirizcustom-component.

app.html

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

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

Aşağıdaki çıktıdır. Header ve Footer metin oluşturuluyor myComponent içeride app.js. Ek metin,custom-component.js.