Aurelia - elementos personalizados

Aurelia oferece uma maneira de adicionar componentes dinamicamente. Você pode reutilizar um único componente em diferentes partes do seu aplicativo sem a necessidade de incluir HTML várias vezes. Neste capítulo, você aprenderá como fazer isso.

Etapa 1 - Criar o componente personalizado

Vamos criar novos components diretório dentro src pasta.

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

Dentro deste diretório, vamos criar custom-component.html. Este componente será inserido posteriormente na página HTML.

custom-component.html

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

Etapa 2 - Criar o componente principal

Vamos criar um componente simples em app.js. Será usado para renderizarheader e footer texto na tela.

app.js

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

Etapa 3 - Adicionar o componente personalizado

Dentro do nosso app.html arquivo, precisamos require a custom-component.htmlpara poder inseri-lo dinamicamente. Depois de fazer isso, podemos adicionar um novo elementocustom-component.

app.html

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

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

A seguir está a saída. Header e Footer o texto é renderizado de myComponent dentro app.js. O texto adicional é renderizado a partir docustom-component.js.