Question

我有一个sidenav，其中包括一个下拉菜单。您可以在其中选择一个用户。根据用户的不同，可以使用不同的菜单项（没有问题）。如果您通过下拉菜单更改用户（无论您位于哪个菜单项上），都应转到用户详细信息页面（也可以使用）。

现在出现问题：如果我在userA的详细信息视图中（菜单项突出显示），并且将用户更改为userB，我（正确）将停留在详细信息视图中。网址正确更改，该视图将显示userB的详细信息。但是菜单项不再突出显示。我尝试了很多，但到目前为止没有任何效果。

Sidenode：我想更改服务中的导航，因为我想添加更多的逻辑，并且还需要在其他组件中使用它。

我现在所拥有的（大大缩短了）：

sidenav.component.html

    <mat-list-item>
      <div>
        <mat-label fxLayout="row">
          <span>Selected User</span>
        </mat-label>
        <mat-select #select placeholder="Select User" (selectionChange)="selectionChange()">
          <mat-option *ngFor="let u of user" [value]="u">
            {{ u.name }}
          </mat-option>
        </mat-select>
      </div>
    </mat-list-item>

    <mat-list-item>  
      <a mat-line [routerLink]="['/user', user.id, 'details']" [routerLinkActive]="['active']">User</a>  
    </mat-list-item>

    // more mat-list-items in here

sidenav.component.ts

    selectionChange(): void {
      this.userService.navigate();
    }

user.service.ts

    navigate(): void {
      this.router.navigate(['/user/' + this.user.id + '/details']);
    }

app-routing.module.ts

    const appRoutes: Routes = [
      {
        path: '',
        component: MyAppComponent,
        children: [
          {
            path: 'user',
            loadChildren: './user/user.module#UserModule',
          },
          {
            path: 'user/:userID/details',
            loadChildren: './user-details/user-details.module#UserDetailsModule',
          },
        ],
      }
    ];

如果仅更改url中的参数，是否有人知道如何保持菜单项激活？我正在使用Angular6。

谢谢。

编辑：为澄清起见，sidenav最终看起来像这样：
用户下拉列表（带有UserA和UserB）
详细信息
项目
[更多菜单项]

在此视图上，我想突出显示Details

如果url参数更改，则激活菜单项

0 个答案: