title: How to pass a parameter to child route from a sibling route in Nativescript
body: <p>I'm using <code>&lt;page-router-outlet&gt;</code> as the main outlet in my application.</p>
  
  <p>In one of the pages .html I have several navigation buttons and a <code>&lt;router-outlet&gt;</code>, because I want to render the result of clicking those buttons to the <code>&lt;router-outlet&gt;</code>.</p>
  
  <p>At route level that page has child routes:</p>
  
  <pre><code>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,
        },
      ],
    },
  </code></pre>
  
  <p>From the page that list all grocery lists I link to the one that shows the info of a specific grocery list using <code>[nsRouterLink]</code> like this:</p>
  
  <pre><code>&lt;Label [text]="item.name" margin="10" [nsRouterLink]="['/grocery-list', groceryListId]"&gt;&lt;/Label&gt;
  </code></pre>
  
  <p>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 <code>&lt;router-outlet&gt;</code>.</p>
  
  <p>Now I want to link from GroceryListProductsComponent (loaded in <code>&lt;router-outlet&gt;</code>) to the other child route (ProductsComponent) using this directive in GroceryListProductsComponent HTML:</p>
  
  <pre><code>&lt;Label text="Next" width="80" height="80" [nsRouterLink]="['../products/', {zzz: 22}]"&gt;&lt;/Label&gt;
  </code></pre>
  
  <p>The app navigate to the sibling route but doesnt pass the parameter zzz. I have tried using query parameters like this:</p>
  
  <pre><code>&lt;Label text="Next" width="80" height="80" [nsRouterLink]="['../products/', 22]"&gt;&lt;/Label&gt;
  </code></pre>
  
  <p>and changing the route to:</p>
  
  <pre><code>{
      path: 'products/:zzz',
      component: ProductsComponent,
  }
  </code></pre>
  
  <p>With no result.</p>
  
  <p>I'm getting the parameters on the target component like this:</p>
  
  <pre><code>constructor(private pageRoute: PageRoute, private router: Router){
      this.pageRoute.activatedRoute
      .switchMap(activatedRoute =&gt; activatedRoute.params)
      .forEach((params) =&gt; { 
          this.zzz= params['zzz'];
      });
  }
  </code></pre>
  
  <p>But when I try to alert() the variable this.zzz it says: undefined. </p>
  
  <pre><code>ngOnInit(){
  alert(this.zzz);
  }
  </code></pre>
  
  <p>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.</p>
  
  <p>Thanks in advance.</p>