Aurelia - Benutzerdefinierte Elemente

Aurelia bietet eine Möglichkeit, Komponenten dynamisch hinzuzufügen. Sie können eine einzelne Komponente in verschiedenen Teilen Ihrer App wiederverwenden, ohne HTML mehrmals einfügen zu müssen. In diesem Kapitel erfahren Sie, wie Sie dies erreichen.

Schritt 1 - Erstellen Sie die benutzerdefinierte Komponente

Lassen Sie uns neue erstellen components Verzeichnis im Inneren src Mappe.

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

In diesem Verzeichnis erstellen wir custom-component.html. Diese Komponente wird später in die HTML-Seite eingefügt.

custom-component.html

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

Schritt 2 - Erstellen Sie die Hauptkomponente

Wir werden eine einfache Komponente in erstellen app.js. Es wird zum Rendern verwendetheader und footer Text auf dem Bildschirm.

app.js.

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

Schritt 3 - Fügen Sie die benutzerdefinierte Komponente hinzu

In unserem app.html Datei müssen wir require das custom-component.htmlum es dynamisch einfügen zu können. Sobald wir das getan haben, können wir ein neues Element hinzufügencustom-component.

app.html

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

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

Es folgt die Ausgabe. Header und Footer Text wird aus gerendert myComponent Innerhalb app.js. Der zusätzliche Text wird aus dem gerendertcustom-component.js.