Angular Basics
Inherit Parent Route Parameters by Default with ParamsInheritanceStrategy
Right now, we're getting the ID route parameter off the of the parent route. This is because we want the info and items components to use the ID of the chosen camping system without having to pass it a second time. There's another way we can do this, though, and that's by defining a paramsInheritanceStrategy when we create our router module. The paramsInheritanceStrategy defines how the router merges parameters, data, and resolved data from parent to child routes. The default is "emptyOnly," which inherits those only for path-less or component-less routes. We're going to set it to "always" to enable unconditional inheritance of parent parameters, data, and resolved data in child routes.
Sam Julien: [0:00] Right now, we're getting the ID route parameter off of the parent route. This is because we want these info and items components that are child routes to be able to access that ID without having to pass it to it a second time.
[0:14] There's another way we can do this, though, and that's by defining what's called a paramsInheritanceStrategy inside of our app module when we create our router module. This RouterModule.forRoot() method takes in a second parameter, which is an options object.
[0:31] Inside of this options object, we can define the paramsInheritanceStrategy. This is just how the router merges parameters, data, and resolved data from parent to child routes. The default is called emptyOnly, which inherits parent parameters, data, and resolved data only for path-less or component-less routes.
[0:54] What we want to do is set this instead to "always" and this will enable unconditional inheritance of parent parameters data and unresolved data.
[1:04] In other words, we'll have access directly to any parameters data or resolved data that's on the parent inside of our child route. Let's go ahead and save this. If I go back over to our items component, I can now just remove this parent from here. I can do the same thing in the info component, remove the parent from there. If I refresh the page, both child routes are still working.
[1:29] Now, before you make this change, there's one thing you need to be aware of. If there's any sort of overlap between data for example, that you're passing between parent and child routes, the activated route will be the one that wins out. Let's take an example of that if we just add a data object to both of these routes.
[1:47] Let's set a Boolean. Let's say, "isAwesome: true" and add our comma here, but then we change "isAwesome: false" for this child info route. What will happen is that when the info route is the active route isAwesome will be set to false because it will override the parents matching isAwesome property in its data object.
[2:08] Aside from that one caveat, this is a great way to inherit both route parameters and data from parent routes to child routes.