Активируйте пункт меню, если изменился параметр URL - PullRequest
Новая
       17

Активируйте пункт меню, если изменился параметр URL

0 голосов
/ 27 ноября 2018

У меня есть sidenav, в котором есть выпадающий список.В нем вы можете выбрать пользователя.В зависимости от пользователя, доступны различные пункты меню (без проблем).Если вы меняете пользователя с помощью выпадающего меню (независимо от того, в каком пункте меню вы находитесь), вы должны быть перенаправлены на страницу сведений о пользователе (также работает).

Теперь проблема: если я в подробном представлениидля пользователя A (пункт меню выделен), и я изменяю пользователя на userB, я (правильно) останусь в подробном представлении.URL-адрес изменяется правильно, и представление покажет детали для пользователя B.НО пункт меню больше не подсвечивается.Я много пробовал, но пока ничего не работает.

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 выделялось, когда я нахожусь на этом представлении

...