Aurelia - 自定义元素

• 

  简述

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

  第 1 步 - 创建自定义组件

  让我们创造新的components里面的目录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. 它将用于渲染header和footer屏幕上的文字。

  应用程序.js

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

• 

  第 3 步 - 添加自定义组件

  在我们的里面app.html文件，我们需要require这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>
  

  以下是输出。Header和Footer文本是从myComponent里面app.js. 附加文本从custom-component.js.