Аурелия - Пользовательские элементы

Aurelia предлагает способ динамического добавления компонентов. Вы можете повторно использовать один компонент в разных частях приложения без необходимости многократно включать HTML. В этой главе вы узнаете, как этого добиться.

Шаг 1 - Создайте пользовательский компонент

Создадим новый components каталог внутри 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. Он будет использоваться для рендерингаheader а также footer текст на экране.

app.js

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

Шаг 3 - Добавьте пользовательский компонент

Внутри нашего app.html файл, нам нужно require в custom-component.htmlчтобы иметь возможность вставлять его динамически. Как только мы это сделаем, мы можем добавить новый элементcustom-component.

app.html

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

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

Ниже приводится результат. Header а также Footer текст отображается из myComponent внутри app.js. Дополнительный текст отображается изcustom-component.js.