Как ссылаться на правильный роутер в мат-сиденав Angular 7?

Question

Я новичок в Angular. Мне нужно использовать ту же ссылку маршрутизатора в моем mat-list-item, что и в подпункте mat-sidenav-content.

Например: [routerLink]="['/list',{outlets: {sidebar: ['general', employee.userId]}}]

Является ли правильная ссылка, которая также должна быть такой же ссылкой внутри sub mat-sidenav-content. Вместо этого у меня есть следующая ссылка маршрутизатора, которая не является правильной:

[routerLink]="['/list',{outlets: {sidebar: ['general', userId]}}].

Я не знаю, как это сделать sh, и буду признателен за любую помощь в решении этой проблемы. Спасибо.

<mat-sidenav-container class="sidenav-container">

<mat-sidenav #drawer class="sidenav" fixedInViewport [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) === false">
    <mat-toolbar>List of Employee</mat-toolbar>
    <mat-nav-list>
        <div *ngFor="let employee of employees">
            <mat-list-item>
                <a [routerLink]="['/list',{outlets: {sidebar: ['general', employee.userId]}}]">{{employee.firstName}}
            </a>
            </mat-list-item>
        </div>
    </mat-nav-list>
</mat-sidenav>

<mat-sidenav-content> 
    <mat-toolbar color="accent" class="navbar">
        <span><a mat-list-item [routerLink]="['/list',{outlets: {sidebar: ['general', userId]}}]">
                <mat-icon>assignment_ind</mat-icon>General
            </a></span>
        <span><a mat-list-item [routerLink]="['/list',{outlets: {sidebar: ['vehicleInformation', userId]}}]">
                <mat-icon>directions_car</mat-icon>Vehicle Information
            </a></span>
        <span> <a mat-list-item [routerLink]="['/list',{outlets: {sidebar: ['OLOUserRights']}}]">
                <mat-icon>vpn_key</mat-icon>OLO User Rights
            </a></span>
    </mat-toolbar>

    <router-outlet name="sidebar"></router-outlet>

</mat-sidenav-content>

Answer 1

это мое решение:

 <div *ngFor="let employee of employees">
                    <mat-list-item>
                     <a routerLinkActive="active" (click)='saveUserID(employee.userId)' [routerLink]="['/list',{outlets: {sidebar: ['general', employee.userId]}}]">{{employee.firstName}}
            </a>list-item>
                </div>

изменить в HTML в последних 3 ссылках userId на globalId

    **Ts File**
    saveUserID(id: number): void { 
this.globalId = id;

}

Answer 2

    **HTML**      
      <div *ngFor="let employee of employees">
                        <mat-list-item>
                            <a (click)="senddata()">{{employee.firstName}}
                        </a>
                        </mat-list-item>
                    </div>

        **Ts File**
        senddata(){
 this.router.navigate(['/list', {outlets: {sidebar: ['general', employee.userId]}}]);
        }