Aurelia - Yếu tố tùy chỉnh

Aurelia cung cấp một cách để thêm các thành phần động. Bạn có thể sử dụng lại một thành phần trên các phần khác nhau của ứng dụng mà không cần bao gồm HTML nhiều lần. Trong chương này, bạn sẽ học cách đạt được điều này.

Bước 1 - Tạo thành phần tùy chỉnh

Hãy tạo mới components thư mục bên trong src thư mục.

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

Bên trong thư mục này, chúng tôi sẽ tạo custom-component.html. Thành phần này sẽ được chèn sau trong trang HTML.

custom-component.html

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

Bước 2 - Tạo thành phần chính

Chúng tôi sẽ tạo thành phần đơn giản trong app.js. Nó sẽ được sử dụng để kết xuấtheaderfooter văn bản trên màn hình.

app.js

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

Bước 3 - Thêm thành phần tùy chỉnh

Bên trong của chúng tôi app.html tập tin, chúng tôi cần require các custom-component.htmlđể có thể chèn động. Khi chúng tôi làm điều đó, chúng tôi có thể thêm một phần tử mớicustom-component.

app.html

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

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

Sau đây là đầu ra. HeaderFooter văn bản được kết xuất từ myComponent phía trong app.js. Văn bản bổ sung được hiển thị từcustom-component.js.