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。