Aurelia - 自定义元素

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

第 1 步 - 创建自定义组件

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

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

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

自定义组件.html

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

第 2 步 - 创建主要组件

我们将在app.js中创建简单的组件。它将用于在屏幕上呈现页眉和页脚文本。

应用程序.js

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

第 3 步 - 添加自定义组件

在我们的app.html文件中，我们需要要求custom -component.html能够动态插入它。一旦我们这样做了，我们就可以添加一个新元素custom-component。

应用程序.html

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

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

以下是输出。页眉和页脚文本从​​app.js内的myComponent呈现。附加文本是从custom-component.js呈现的。

Aurelia 自定义元素示例