Aurelia 自定义元素
Aurelia 提供了一种动态添加组件的方法。您可以在应用程序的不同部分重用单个组件，而无需多次包含 HTML。在本章中，您将学习如何实现这一目标。
步骤 1-创建自定义组件
让我们在
src 文件夹中创建新的
components 目录。
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 文本是从
app.js 内的
myComponent 呈现的。附加文本从
custom-component.js 呈现。
