Aurelia - Elementos personalizados

Aurelia ofrece una forma de agregar componentes de forma dinámica. Puede reutilizar un solo componente en diferentes partes de su aplicación sin la necesidad de incluir HTML varias veces. En este capítulo, aprenderá cómo lograrlo.

Paso 1: crear el componente personalizado

Creemos nuevo components directorio dentro src carpeta.

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

Dentro de este directorio, crearemos custom-component.html. Este componente se insertará más adelante en la página HTML.

componente-personalizado.html

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

Paso 2: crear el componente principal

Crearemos un componente simple en app.js. Se usará para renderizarheader y footer texto en pantalla.

app.js

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

Paso 3: agregue el componente personalizado

Dentro de nuestro app.html archivo, necesitamos require la custom-component.htmlpara poder insertarlo de forma dinámica. Una vez que hagamos eso, podemos agregar un nuevo elementocustom-component.

app.html

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

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

A continuación se muestra la salida. Header y Footer el texto se representa a partir de myComponent dentro app.js. El texto adicional se renderiza desde elcustom-component.js.