Aurelia - Custom Elements أوريليا - عناصر مخصصة

 Aurelia - Custom Elements أوريليا - عناصر مخصصة

تقدم Aurelia طريقة لإضافة المكونات ديناميكيًا. يمكنك إعادة استخدام مكون واحد في أجزاء مختلفة من تطبيقك دون الحاجة إلى تضمين HTML عدة مرات. في هذا الفصل ، سوف تتعلم كيفية تحقيق ذلك.

الخطوة 1 - إنشاء المكون المخصص

لنقم بإنشاء دليل مكونات جديد داخل مجلد src .

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

داخل هذا الدليل ، سننشئ custom-component.html . سيتم إدراج هذا المكون لاحقًا في صفحة HTML.

custom-component.html

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

الخطوة 2 - إنشاء المكون الرئيسي

سنقوم إنشاء مكون بسيط في app.js . سيتم استخدامها لتقديم رأس و تذييل النص على الشاشة.

app.js

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

الخطوة 3 - أضف المكون المخصص

داخل لدينا app.html الملف، نحن بحاجة إلى تتطلب و العرف component.html لتكون قادرة على إدراج بشكل حيوي. بمجرد القيام بذلك ، يمكننا إضافة عنصر مخصص جديد .

app.html

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

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

فيما يلي الإخراج. رأس و تذييل يتم تقديم النص من myComponent داخل app.js . يتم تقديم النص الإضافي من custom-component.js .