Aurelia-カスタム要素

Aureliaは、コンポーネントを動的に追加する方法を提供します。HTMLを複数回含めることなく、アプリのさまざまな部分で1つのコンポーネントを再利用できます。この章では、これを実現する方法を学習します。

ステップ1-カスタムコンポーネントを作成する

新しいものを作りましょう components 内部のディレクトリ src フォルダ。

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。レンダリングに使用されますheader そして footer 画面上のテキスト。

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>

以下は出力です。 Header そして Footer テキストはからレンダリングされます myComponent 内部 app.js。追加のテキストはからレンダリングされますcustom-component.js