1

我是 Angular 的新手。我需要在我mat-list-item的 sub中使用相同的路由器链接mat-sidenav-content。

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

是正确的链接，我还需要是 sub 内的相同链接mat-sidenav-content。相反，我有以下路由器链接，这是不正确的：

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

我不知道如何做到这一点，并会感谢任何帮助解决这个问题。谢谢你。

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

4

2 回答 2

0

这是我的解决方案：

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

在最后 3 个链接中更改 HTML 将 userId 链接到 globalId

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

}

于 2020-01-30T18:39:52.870 回答
0 
    **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]}}]);
        }
于 2020-01-30T04:25:00.813 回答