Как применить Angular routerLinkActive для компонента вкладки, который использует один и тот же путь

Я создал страницу, используя угловой материал с боковой панелью и вкладкой.
Я использую angular 7.
Вот образец изображения ->

пример изображения: введите здесь описание изображения

Когда я перехожу на вкладку content, класс is-active больше не применяется к выбранной группе на боковой панели (без выделения). он разделяет тот же путь. Группа должна быть выделена, когда мы переходим на вкладку содержимого. Я пробую несколько методов, но все равно не могу этого добиться.
Вот мой код:

app.html

<mat-sidenav-container class="user-group-container">
  <mat-sidenav class="group-sidenav" mode="side" opened>
    <h3 matSubheader class="menu-sidenav-header">Groups</h3>
    <mat-list class="menu-list-sidenav" role="list">
      <mat-list-item *ngFor="let group of groups?.groupList" role="listitem">
        <div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']">
          {{(group.groupName.length > 22) ? (group.groupName | slice:0:23) + '..' :(group.groupName)}}
        </div>
      </mat-list-item>
    </mat-list>
    <div class="add-group-section" (click)="openCreateGroupModal()">
      <mat-icon mat-list-icon>add</mat-icon>
      <div class="add-group-btn">Add New Group</div>
    </div>
  </mat-sidenav>
  <mat-sidenav-content>
    <nav mat-tab-nav-bar>
      <a mat-tab-link *ngFor="let routeLink of routeLinks; let i = index;" [routerLink]="routeLink.link" routerLinkActive #rla="routerLinkActive" (click)="activeLinkIndex = i" [active]="rla.isActive">
					{{routeLink.label}}
				</a>
    </nav>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

app.ts

export class UserGroupComponent implements OnInit {

  routeLinks: any[];
  activeLinkIndex = -1;

  constructor(private userManagementService: UserManagementService,
    public dialog: MatDialog) {

    this.routeLinks = [{
        label: 'Overview',
        link: './overview',
        index: 0
      },
      {
        label: 'Permissions',
        link: './permission',
        index: 1
      }
    ];
  }

  ngOnInit() {}

  get groups() {
    return this.userManagementService.groups;
  }

}

app.routing.ts

const userManagementRoutes: Routes = [{
  path: '',
  component: UserManagementComponent,
  children: [{
    path: 'group/:groupCode',
    component: UserGroupComponent,
    canActivate: [AuthGuard],
    children: [{
        path: 'permission',
        component: UserPermissionComponent,
        canActivate: [AuthGuard]
      },
      {
        path: 'overview',
        component: UserGroupOverviewComponent,
        canActivate: [AuthGuard]
      }
    ]
  }]
}];

@NgModule({
  imports: [
    RouterModule.forChild(userManagementRoutes)
  ],
  exports: [RouterModule]
})
export class UserManagementRoutingModule {}


person SKL    schedule 25.03.2019    source источник
comment
Не могли бы вы создать небольшую демонстрацию поверх stackblitz?, будет легко отладить проблему.   -  person Abhishek Kumar    schedule 25.03.2019
comment
@AbhishekKumar столкнулся с проблемой при создании stackblitz. вот код: stackblitz.com/edit/angular-material-tabs- on-push-vtzvvn   -  person SKL    schedule 25.03.2019
comment
[routerLinkActive]="['is-active']" будет истинным для групп для определенного URL-адреса, и я думаю, что, поскольку вы используете панель вкладок с nav-links, поэтому URL-адрес меняется, а параметр is-active из групп не выбран. Это происходит?? или в обоих случаях URL-адрес одинаков.   -  person Abhishek Kumar    schedule 25.03.2019
comment
Да исправить. При первой загрузке страницы этот URL group/{{Dynamic_Code}}/overview вызывается для вкладки контента group//{{Dynamic_Code}}/content   -  person SKL    schedule 25.03.2019
comment
я должен опубликовать это как ответ? или это нормально для других пользователей, которые ищут ответ.   -  person Abhishek Kumar    schedule 25.03.2019
comment
@AbhishekKumar Пожалуйста, поделитесь своим ответом, если у вас есть   -  person SKL    schedule 25.03.2019
comment
я опубликую то же, что и комментарий, который я разместил здесь, то есть об изменении URL-адреса, поэтому он не работал. Надеюсь, вы нашли решение, и этот ответ будет полезен другим пользователям, которые ищут аналогичный ответ.   -  person Abhishek Kumar    schedule 25.03.2019


Ответы (1)


Я решил это с помощью ngClass. Я удалил [routerLinkActive]="['is-active']" и просто добавил условие ngClass, как показано ниже.

<div [ngClass]="(group.groupCode === groupCode) ? 'is-active' : ''" matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']">
  {{(group.groupName.length > 22) ? (group.groupName | slice:0:23) + '..' :(group.groupName)}}
</div>

person SKL    schedule 25.03.2019