CODEWITHSUNDEEP
angular
Richard77
Richard77

Reputation: 21611

Angular: How to extract parameters from child routes?

Let's say I've this table

+--------------------+-------+----------+---------+
| Label | Date       | Items | Location |         |
+-------+------------+-------+----------+---------+
| REF 1 | 12/12/2017 | 3     | Floor 1  | Details |
+-------+------------+-------+----------+---------+
| TXD 7 | 12/31/2017 | 1     | Floor 3  | Details |
+-------+------------+-------+----------+---------+

Details is a button. When user clicks the the Details button, div with tabs should display on the bottom.

+------------------------+
| TAB 1  | TAB 2 | TAB 3 |
+--------+-------+-------+------------------------+
|                                                 |
| Content of the TAB 1                            |
|                                                 |
|                                                 |
+-------------------------------------------------+

Here's the routing

RouterModule.forChild([
  { 
    path: 'gift', component: GiftComponent, 
  },
  {
    path: 'gift/:id', component: GiftComponent,
    children: [
      { path: '', redirectTo: 'giftItemList', pathMatch: 'full'},
      { path: 'giftItemList', component: GiftItemListComponent },
      { path: 'giftItemDetails', component: GiftItemDetailsComponent }
    ]
  }      
])

When user the Gift link from the menu <li><a [routerLink]="'/gift'">Gift</a></li>, the gift component is displayed. Only the upper portion is displayed.

If the user clicks the Details button, 

 <td>
     <button (click)="displayGiftItems(gift.id)" class="btn btn-link">
        Details
     </button>
</td>

Then displayGiftItems function from the component is called. It makes the the surrounding DIV visible where the child component will be displayed. Then it navigate to the child component. 

 displayGiftItems(id: number, e) {
if (id) {
  this.giftItemsPanelIsVisible = true;  
  this.router.navigate(['giftItemList'], { relativeTo: this.route});
}

}

When I click the Details button, the url doesn't have this form: gift/1/giftItemList.

How to get such url and how to extract parameters from this url?

Thanks for helping

Upvotes: 0

Views: 178

Answers (1)

DeborahK
DeborahK

Reputation: 60518

You could try something like this:

displayGiftItems(id: number, e) {
if (id) {
  this.giftItemsPanelIsVisible = true;  
  this.router.navigate(['gift', id, 'giftItemList']);
}

You then read it something like this:

const id = route.paramMap.get('id');

For more information, see this post: Sending data with route.navigate in Angular 2

Upvotes: 1

Related Questions