Unterschied zwischen HTML-Komponente und einer normalen Komponente in Aurelia?

Question

Ich beginne mit dem Standard-TypeScript-Skelett für meine Aurelia-Entwicklung.

Ich wollte der "nav-bar" -Komponente etwas Code hinzufügen, also entschied ich mich, es von einer einfachen HTML-only-Komponente in eine reguläre Komponente zu konvertieren. Zu diesem Zweck geändert, ich die erfordern Tag in meinem app.html aus:

<require from="nav-bar.html"></require> 

zu

<require from="nav-bar"></require> 

Als nächstes habe ich eine nav-bar.ts-Datei, die den folgenden Code enthalten :

Ich verließ die nav-bar.html genau wie es ist. Jetzt läuft das Programm und die Konsole enthält den TEST-Wert aus der instanziierten NavBarClass, ABER Das Menü, das angezeigt wurde, wenn die Navigationsleiste HTML-only war, fehlt jetzt.

Wie bekomme ich das Menü zurück? Was mache ich falsch? Wie unterscheidet sich eine reguläre Komponente von einer reinen HTML-Komponente?

Danke für Ihre Hilfe, -Greg

Answer 1

In einem Standardelement benutzerdefinierten die bindungsfähigen Eigenschaften im View-Modell definiert sind:

nav-bar.js:

export class NavBar { 
    @bindable router; 
    ... 
    ... 
} 

In einem benutzerdefinierten html-Element gibt es kein Ansichtsmodell, daher sind die bindbaren Eigenschaften im <template>-Element des Elements bindable aufgeführt:

nav-bar.html:

<template bindable="router"> 
    ... 
    ... 
</template> 

So oder so die nav-Bar Element Nutzung das gleiche ist:

<nav-bar router.bind="router"></nav-bar>