Aurelia предлагает способ динамического добавления компонентов. Вы можете повторно использовать один компонент в разных частях вашего приложения без необходимости многократного включения HTML. В этой главе вы узнаете, как этого добиться.
Шаг 1 — Создайте пользовательский компонент
Давайте создадим новый каталог компонентов внутри папки src .
C:\Users\username\Desktop\aureliaApp\src>mkdir components
Внутри этого каталога мы создадим custom-component.html . Этот компонент будет вставлен позже на страницу HTML.
заказ component.html
<template> <p>This is some text from dynamic component...</p> </template>
Шаг 2 — Создайте основной компонент
Мы создадим простой компонент в app.js. Он будет использоваться для отображения текста верхнего и нижнего колонтитула на экране.
app.js
export class MyComponent {
header = "This is Header";
content = "This is content";
}
Шаг 3 — Добавить пользовательский компонент
Внутри нашего файла app.html мы должны требовать, чтобы 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>
Ниже приводится вывод. Текст верхнего и нижнего колонтитула отображается из myComponent внутри app.js. Дополнительный текст отображается из custom-component.js .