Aurelia: Wie kann ich den Sidebar-Inhalt innerhalb einer Routeransicht ändern?

Question

Ich versuche zu verstehen, wie "innere Komponenten" den Inhalt von "äußeren Komponenten" anpassen können. Lassen Sie uns sagen, dass ich eine Anwendung Vorlage haben, die etwa wie folgt aussieht:

<template> 
    <div class="sidebar"> 
     <div>Some app-wide content</div> 
     <div> 
      <!-- I want to put some view-specific content here --> 
     </div> 
    </div> 

    <div class="main-body"> 
     <router-view></router-view> 
    </div> 
</template> 

Jeder Subview der Sidebar unterschiedliche Inhalte will machen. Offensichtlich wäre dies einfach, wenn die Unteransicht den Bereich der Seitenleiste selbst enthält, aber sagen wir, dass es wichtig ist, die Struktur beizubehalten, und wir nicht das Boilerplate der Seitenleiste über jede Ansicht replizieren wollen.

Gibt es eine Möglichkeit für eine untergeordnete Ansicht zu deklarieren "Export dieser zusätzlichen Komponente für die Anzeige an einem anderen Ort?" Ich stelle mir so etwas vor wie das Injizieren der Elternansicht und das Aufrufen einer Methode, aber ich kann es aus der Dokumentation nicht herausfinden.

Answer 1

Einfache Demo:

Es ist ziemlich einfach, eigentlich. Nur import und inject Ihre Sidebar oder ein anderes Viewmodel und rufen Sie eine Methode oder aktualisieren Sie eine Eigenschaft.

https://gist.run/?id=745b6792a07d92cbe7e9937020063260

Lösung mit Compose:

Wenn Sie aufwändigere bekommen möchten, können Sie eine compose view.bind Variable auf die Sidebar in einer anderen Ansicht/Ansichtsmodell ziehen würde, basierend auf der eingestellte Wert.

https://gist.run/?id=ac765dde74a30e009f4aba0f1acadcc5

Alternative Ansatz:

Wenn Sie nicht importieren möchten, können Sie auch die eventAggregator verwenden könnte ein Ereignis aus der Router-Ansicht zu veröffentlichen und abonnieren Sie diesem Ereignis hören von Ihrem Sidebar und entsprechend handeln. Dies würde für eine große App-Einstellung gut funktionieren, in der Sie sie nicht zu eng miteinander verknüpfen wollten, aber die Seitenleiste sollte auf unvorhersehbare Routing-Muster reagieren, indem sie immer reagierte, wenn Trigger veröffentlicht wurden.

https://gist.run/?id=28447bcb4b0c67cff472aae397fd66c0

Answer 2

@<compose>-Lösung LStarkey ist das, was ich suchte, aber andere zu helfen, ich denke, dass es zwei andere tragfähige Lösungen zu erwähnen, die in anderen Foren zu mir vorgeschlagen:

1. Ansicht Häfen . Sie können mehrere benannte Router-Ansichten in einer Vorlage angeben und sie dann ausfüllen, indem Sie ein Objekt viewPorts an den Router übergeben, anstatt eine einzelne moduleId anzugeben. Die beste Dokumentationsquelle ist ein kurzer Klappentext im "Spickzettel" der Aurelia-Dokumentation.
2. Benutzerdefinierte Elemente. Es ist ein wenig mehr "Inside-Out", aber Sie könnten den Großteil des äußeren Inhalts als ein benutzerdefiniertes Element definieren, das über Slots für die Sidebar und den Hauptkörper verfügt. Jede Kindansicht würde dieses benutzerdefinierte Element definieren und die entsprechenden Teile übergeben.