Question

我想指定所选路由器链接的ID。

我订阅路由器事件如下：

constructor(private router: Router) {
   router.events.subscribe((val) => {
      if (val instanceof NavigationEnd) {
         this.selectMenuItem(val.id);
      }
    });
}

链接到以下HTML

<div class="dropdown-container" *ngFor="let item of menuItems"(click)="toggleMenu($event)" routerLinkActive="router-link-active"
    #rla="routerLinkActive">
  <p class="dropdown-button"><i ngClass="{{item.style}}" ></i> {{item.caption}} {{ rla.isActive ? '*' : ''}}</p>
  <ul class="dropdown-menu dropdown-select">
      <li *ngFor="let subItem of item.subItems" [routerLink]="subItem.link">{{subItem.caption}}</li>
  </ul>
</div>

当我得到偶数时，val的值如下：

NavigationEnd {id: 1, url: "/settings/location", urlAfterRedirects: "/settings/location"}

我的问题是如何设置HTML，以便id中的值是{{subItem.id}}中包含的值

Answer 1

路由器事件中的“id”是导航 ID。它用于唯一标识导航，以便您可以将NavigationStart事件与NavigationEnd事件相关联。你无法将其重新定位为其他东西。

您应该将subItem id作为路由参数或查询参数传递。简单的例子：

<li [routerLink]="subItem.link" [queryParams]="{'subItemId': subItem.id}">

然后在路由器事件订阅中，您可以在网址末尾查找subItemId。

设置路由更改时可以检测到的路由的ID

1 个答案: