Aurelia-custom-elements

Aurelia-カスタム要素

Aureliaは、コンポーネントを動的に追加する方法を提供します。 HTMLを複数回含める必要なく、アプリのさまざまな部分で単一のコンポーネントを再利用できます。 この章では、これを達成する方法を学びます。

手順1-カスタムコンポーネントの作成

*src* フォルダ内に新しい *components* ディレクトリを作成しましょう。

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

このディレクトリ内に、 custom-componentl を作成します。 このコンポーネントは、後で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-カスタムコンポーネントの追加

*appl* ファイル内で、 *custom-componentl* を動的に挿入できるようにする必要があります。 それができたら、新しい要素 *custom-component* を追加できます。

appl

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

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

出力は以下のとおりです。 Header および Footer テキストは、 app.js 内の myComponent からレンダリングされます。 追加のテキストは、 custom-component.js からレンダリングされます。

Aureliaカスタム要素の例