Aurelia提供了一种动态添加组件的方法。您可以在应用程序的不同部分上重复使用单个组件，而无需多次包含HTML。在本章中，您将学习如何实现这一目标。

第1步-创建自定义组件

让我们在src文件夹中创建新的组件目录。

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

在此目录中，我们将创建custom-component.html 。该组件将稍后插入HTML页面中。

custom-component.html

第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

以下是输出。页眉和页脚文本是从app.js中的myComponent呈现的。其他文本是从custom-component.js呈现的。