How to dynamically build navigation menu from routes linking to parent/child views/controllers

Question

This question is a follow-up question for my original question Linking directly to both parent+child views/controllers from the main navigation menu

The accepted answer

Answer 1

So I took a stab at your problem using the EventAggregator in the Activate lifecycle hook in the child view models.

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

in the child view models, I just published an event stating the child route was updated:

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 the app.js file, I updated the route titles, and added an activeChild property. Next, update the activeChild property when the event is captured:

constructor(aggregator) { 

  this.aggregator = aggregator; 



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

    this.activeChildRoute = payload;

    console.log(this.activeChildRoute);

  });

}

Finally, I updated the class expression on you list item to update based on that active child Flag:

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