我是Angular的新手。 我需要在mat-list-item
中使用与子mat-sidenav-content
中相同的路由器链接。
例如:[routerLink]="['/list',{outlets: {sidebar: ['general', employee.userId]}}]
是正确的链接,我也需要与子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>
**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]}}]);
}
这是我的解决方法: