如何在mat-sidenav Angular 7中引用正确的routerlink?

问题描述 投票:1回答:2

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

angular angular7
2个回答
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]}}]);
        }

0
投票

这是我的解决方法:

© www.soinside.com 2019 - 2024. All rights reserved.