Aurelia - Éléments personnalisés

Aurelia offre un moyen d'ajouter des composants de manière dynamique. Vous pouvez réutiliser un seul composant sur différentes parties de votre application sans avoir besoin d'inclure du HTML plusieurs fois. Dans ce chapitre, vous apprendrez comment y parvenir.

Étape 1 - Créez le composant personnalisé

Créons de nouveaux components répertoire à l'intérieur src dossier.

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

Dans ce répertoire, nous allons créer custom-component.html. Ce composant sera inséré ultérieurement dans la page HTML.

composant-personnalisé.html

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

Étape 2 - Créer le composant principal

Nous allons créer un composant simple en app.js. Il sera utilisé pour rendreheader et footer texte à l'écran.

app.js

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

Étape 3 - Ajouter le composant personnalisé

À l'intérieur de notre app.html fichier, nous devons require la custom-component.htmlpour pouvoir l'insérer dynamiquement. Une fois que nous faisons cela, nous pouvons ajouter un nouvel élémentcustom-component.

app.html

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

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

Voici la sortie. Header et Footer le texte est rendu à partir de myComponent à l'intérieur app.js. Le texte supplémentaire est rendu à partir ducustom-component.js.