Aurelia - Elementi personalizzati

Aurelia offre un modo per aggiungere componenti dinamicamente. Puoi riutilizzare un singolo componente su parti diverse della tua app senza la necessità di includere HTML più volte. In questo capitolo imparerai come ottenere ciò.

Passaggio 1: creare il componente personalizzato

Creiamo nuovo components directory all'interno src cartella.

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

All'interno di questa directory, creeremo custom-component.html. Questo componente verrà inserito successivamente nella pagina HTML.

custom-component.html

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

Passaggio 2: creare il componente principale

Creeremo un semplice componente in app.js. Verrà utilizzato per il renderingheader e footer testo sullo schermo.

app.js

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

Passaggio 3: aggiungere il componente personalizzato

All'interno del nostro app.html file, dobbiamo require il custom-component.htmlper poterlo inserire dinamicamente. Una volta fatto ciò, possiamo aggiungere un nuovo elementocustom-component.

app.html

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

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

Di seguito è riportato l'output. Header e Footer il testo viene visualizzato da myComponent dentro app.js. Il testo aggiuntivo viene visualizzato dal filecustom-component.js.