Question

让我说我有这张桌子

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

Details是一个按钮。当用户点击详细信息按钮时，带有标签的div应显示在底部。

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

这是路由

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 }
    ]
  }      
])

当使用菜单<li><a [routerLink]="'/gift'">Gift</a></li>中的礼物链接时，将显示礼物组件。仅显示上部。

如果用户点击“详情”按钮，

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

然后调用组件中的 displayGiftItems 函数。它使周围的DIV可以显示子组件的显示位置。然后导航到子组件。

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

}

当我点击“详情”按钮时，网址没有此表单：gift/1/giftItemList。

如何获取此网址以及如何从此网址中提取参数？

感谢您的帮助

Answer 1

您可以尝试这样的事情：

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

然后你会读到这样的东西：

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

有关详细信息，请参阅此帖子： Sending data with route.navigate in Angular 2

Angular：如何从子路径中提取参数？

1 个答案: