Как применить Angular routerLinkActive для компонента вкладок, имеющих общий путь

Question

Я создал страницу, используя угловой материал с боковой панелью и вкладкой.
Я использую угловой 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 {}

Answer 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>