The bulk of my project relies on pages that contain 2 child routers. The first index page defines the sub navigation and it has “header” component that is visible for all sub navigation. Each sub page generally relies on data that can be shared with all sub pages within that main page.
I’m currently relying on passing a context that is injected to each page. What I don’t like about this approach is it makes re-use of any sub pages difficult as the context is tied to the main entry point.
Should i switch to a store approach where each page grabs an object from a “store” during the activate event?
Is there a better way of passing information with the router (most events are triggered via Href)
Note my approach still works when you have href pointing to a deep route.
Aurelia will run through parent route and child route full lifecycle in order to render the new page. The parent route config.map wouldn’t be missed wherever you navigate from.
I’m just trying to wrap my head around what is really different from your approach over just injecting someService at the constructor other than keeping the constructor signature cleaner.
Sure. Let’s take an example. The top route is 'product/:id', it got two child routes '' (details page), and 'comments' page.
We want to share a common object, but the object is related to a single product id. new ProductService(id). If you use normal DI injection in constructor, you have to do
The problem is that this.productService produced by Factory.of is not a singleton, hence it’s not “shared” among details and comments pages. I used to have a special implementation SingletonFactory to guarantee singleton for same arguments (same input id in this case), but it was bit unnecessarily complex.
If you share object through route settings, it’s for sure the singleton (you created manually).
So maybe I’m missing something but how does this work when “id” changes without doing a complete route change.
What I’ve found to work from my quick experiment is tying back into the activate method and using an object.assign to update property values. A complete object swap doesn’t work, but updating the values of the existing referenced object does.
That is exactly what I ended up doing. The only issue I’m running into right now (Probably my own problem) is that deep linking isn’t working, but when the route Id changes after the page has been loaded everything is working.
Thank you for your help. This is certainly not explained well enough in the official docs
In child router, the routeConfig is the same thing you got in activate callback. You can get route settings from it. I have not tested it, but it should work.
This is a very clever and interesting approach to sharing objects among child routes. Would the Aurelia team consider this the official “Aurelia Way”? I don’t see anything covering this topic in the documentation.