Wie dynamisch Navigationsmenü von Routen bauen Verknüpfung mit Eltern/Kind-Ansichten/Controller

Question

Diese Frage ist eine Folgefrage für meine ursprüngliche Frage Linking directly to both parent+child views/controllers from the main navigation menu

Die akzeptierte Antwort ist groß, aber später, wenn ich einen zweiten hinzugefügt " childRoute "dynamisch, habe ich ein Problem festgestellt. Um meine Navigation dynamisch aufzubauen, musste ich die verschiedenen Routen mit dem gleichen "route" -Attribut hinzufügen. (Siehe app.js im folgenden Beispielcode). Der einzige Unterschied waren die Attribute "title" und "settings".

configureRouter(config, router){ 
    config.title = 'Aurelia'; 
    config.map([ 
     { route: 'shared-parent', moduleId: './shared-parent', settings: { childRoute: 'child-a' }, nav: true, title: 'Shared Parent - child-a' }, 
     { route: 'shared-parent', moduleId: './shared-parent', settings: { childRoute: 'child-b' }, nav: true, title: 'Shared Parent - child-b' }, 
     ... 
    ]); 

    this.router = router; 
    } 

Die Einstellungen Attribut ich in der Ansicht verwendet, dies zu tun:

<a if.bind="row.settings.childRoute" href.bind="row.href + '/' + row.settings.childRoute">${row.title}</a> 

Ich weiß es nicht schön ist, aber es auf der rechten Seite Kind Route nicht navigieren. Das Problem ist, dass es immer die letzte der 2 Routen mit doppelten "Route" -Attributen ist, die als aktiv markiert sind.

Der Grund, warum ich die settings: {childRoute: 'child-a/b' } hinzugefügt statt ihnen gibt verschiedene „route“ Attribute wie route: 'shared-parent/child-a' und route: 'shared-parent/child-b' war, dass die URL würde dann shared-parent/child-a/child-a und shared-parent/child-b/child-b tatsächlich passen, da wir zunächst auf den gemeinsamen Elternteil verbinden.

Diese Live-runnable Kern das Problem offenbar (Kinder eine Route zu aktivieren nie) angezeigt werden soll: https://gist.run/?id=95469a9cb3a762d79da31e0b64248036

Ps. Wenn Sie eine bessere Vorstellung davon haben, wie man den Titel dieser Frage nennt, können Sie ihn gerne bearbeiten.

Answer 1

Also habe ich mit dem EventAggregator in den Child-View-Modellen im Lebenszyklus-Hook aktivieren einen Stich gemacht.

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

in den Kinder Ansicht Modelle, ich war nur ein Ereignis veröffentlicht das Kind Route Angabe aktualisiert:

activate(params, routeConfig, navigationInstruction) { 
    let payload = navigationInstruction.parentInstruction.config.title; 

    payload = payload.substring(0, payload.length - 7); 

    this.aggregator.publish("child route updated", payload + "child-a"); 

} 

In der app.js Datei habe ich die Route Titel aktualisiert und hinzugefügt ein activeChild-Eigenschaft Als nächstes aktualisiert die activeChild Eigenschaft, wenn das Ereignis erfasst wird:

constructor(aggregator) { 

    this.aggregator = aggregator; 



    this.aggregator.subscribe("child route updated", payload => { 

    this.activeChildRoute = payload; 

    console.log(this.activeChildRoute); 

    }); 

} 

Schließlich habe ich die Klasse Ausdruck auf Sie Listenelement aktualisiert an diesem aktiven Kind Flag zur Aktualisierung basiert:

<li repeat.for="row of router.navigation" 
     class="${row.title === activeChildRoute ? 'active' : ''}">