Aurelia教程

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 中创建简单的组件。它将用于在屏幕上呈现 headerfooter 文本。

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>
以下是输出。 HeaderFooter 文本是从 app.js 内的 myComponent 呈现的。附加文本从 custom-component.js 呈现。
Aurelia 自定义元素示例
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4