[Angular] 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.

 

  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, { paramsInheritanceStrategy: "always" })
  ],

 

So in Child component, previously we need to do:

  ngOnInit(): void {
    this.route.parent.paramMap
      .pipe(
        switchMap((params: ParamMap) => {
          this.id = +params.get("id");
          return this.systemService.getSystemItems(this.id);
        })
      )
      .subscribe(data => {
        this.items = data;
      });
  }

But now, we just do:

  ngOnInit(): void {
    this.route.paramMap
      .pipe(
        ...
      )
      .subscribe(data => {
        this.items = data;
      });
  }

 

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.