How to pass a parameter to child route from a sibling route in Nativescript

Question

I'm using <page-router-outlet> as the main outlet in my application.

In one of the pages .html I have several navigation buttons and a <router-outlet>, because I want to render the result of clicking those buttons to the <router-outlet>.

At route level that page has child routes:

const groceryListRoutes: Routes = [
  {
    path: 'grocery-lists',
    component: GroceryListsComponent,
  },
  {
    path: 'grocery-list/:id',
    component: GroceryListComponent,
    children: [
      {
        path: '',
        component: GroceryListProductsComponent,
      },
      {
        path: 'product-categories',
        component: ProductCategoriesComponent,
      },
      {
        path: 'products',
        component: ProductsComponent,
      },
    ],
  },

From the page that list all grocery lists I link to the one that shows the info of a specific grocery list using [nsRouterLink] like this:

<Label [text]="item.name" margin="10" [nsRouterLink]="['/grocery-list', groceryListId]"></Label>

There I passed the parameter with no problems. Once in the grocery-list/:id route it loads the '' child route and load GroceryListProductsComponent in the <router-outlet>.

Now I want to link from GroceryListProductsComponent (loaded in <router-outlet>) to the other child route (ProductsComponent) using this directive in GroceryListProductsComponent HTML:

<Label text="Next" width="80" height="80" [nsRouterLink]="['../products/', {zzz: 22}]"></Label>

The app navigate to the sibling route but doesnt pass the parameter zzz. I have tried using query parameters like this:

<Label text="Next" width="80" height="80" [nsRouterLink]="['../products/', 22]"></Label>

and changing the route to:

{
    path: 'products/:zzz',
    component: ProductsComponent,
}

With no result.

I'm getting the parameters on the target component like this:

constructor(private pageRoute: PageRoute, private router: Router){
    this.pageRoute.activatedRoute
    .switchMap(activatedRoute => activatedRoute.params)
    .forEach((params) => { 
        this.zzz= params['zzz'];
    });
}

But when I try to alert() the variable this.zzz it says: undefined.

ngOnInit(){
alert(this.zzz);
}

So my question is, how to pass a parameter to child route from a sibling route in Nativescript? because when i pass parameters between 2 root routes I have no problem.

Thanks in advance.

Answer 1

Solved the problem.

I should access the child route from the activatedRoute I got from the PageRoute. So the constructor should be like this:

constructor(private pageRoute: PageRoute, private router: Router){
    this.pageRoute.activatedRoute
    .switchMap(activatedRoute => activatedRoute.children[0].paramMap)
    .forEach((params) => { 
        this.zzz= params['params']['zzz'];
    });
}

I accessed the parameter from the child route with this:

activatedRoute.children[0].paramMap