我有一个导航菜单。当我打开它时,按钮/链接Gebruikers(用户)总是表现为活动列表项,但它不应该。
这是我的HTML,它位于mat-nav-list中,* ngf正在检查用户是否应该看到链接。
<a mat-list-item [routerLink]="['/availability']" (click)="linkFollow.emit()" *ngIf="showAvailabilityButton | async">
<mat-icon mat-list-icon>event_available</mat-icon>
<h4 mat-line>Beschikbaarheid</h4>
</a>
<a mat-list-item *ngIf="showAvailabilityMenu | async" [matMenuTriggerFor]="availabilityMenu">
<mat-icon mat-list-icon>event_available</mat-icon>
<h4 mat-line>Beschikbaarheid</h4>
</a>
<mat-menu #availabilityMenu="matMenu" xPosition="after" [overlapTrigger]="false">
<a mat-menu-item [routerLink]="['/availability']" (click)="linkFollow.emit()" *ngIf="showAvailabilityMenuMine | async">Mijn beschikbaarheid</a>
<a mat-menu-item [routerLink]="['/manage/timeblocks']" (click)="linkFollow.emit()" *ngIf="showAvailabilityMenuTimeblocks | async">Tijdsblokken</a>
<a mat-menu-item [routerLink]="['/manage/availability']" (click)="linkFollow.emit()" *ngIf="showAvailabilityMenuPerUser | async">Beschikbaarheid aanpassen</a>
<a mat-menu-item [routerLink]="['/manage/availability/overview']" (click)="linkFollow.emit()" *ngIf="showAvailabilityMenuOverview | async">Overzicht</a>
</mat-menu>
<!-- ABSENCE -->
<a mat-list-item [routerLink]="['/absence']" (click)="linkFollow.emit()" *ngIf="showAbsenceButton | async">
<mat-icon mat-list-icon>beach_access</mat-icon>
<h4 mat-line>Afwezigheid</h4>
</a>
<a mat-list-item *ngIf="showAbsenceMenu | async" [matMenuTriggerFor]="absenceMenu">
<mat-icon mat-list-icon>beach_access</mat-icon>
<h4 mat-line>Afwezigheid</h4>
</a>
<mat-menu #absenceMenu="matMenu" xPosition="after" [overlapTrigger]="false">
<a mat-menu-item [routerLink]="['/absence']" (click)="linkFollow.emit()" *ngIf="showAbsenceMenuMine | async">Mijn afwezigheid</a>
<a mat-menu-item [routerLink]="['/manage/absence']" (click)="linkFollow.emit()" *ngIf="showAbsenceMenuOverview | async">Afwezigheid aanpassen</a>
</mat-menu>
<!-- PLANNING -->
<a mat-list-item [routerLink]="['/planning/view']" (click)="linkFollow.emit()" *ngIf="showPlanningButton | async">
<mat-icon mat-list-icon>grid_on</mat-icon>
<h4 mat-line>Planning</h4>
</a>
<a mat-list-item *ngIf="showPlanningMenu | async" [matMenuTriggerFor]="planningMenu">
<mat-icon mat-list-icon>grid_on</mat-icon>
<h4 mat-line>Planning</h4>
</a>
<mat-menu #planningMenu="matMenu" xPosition="after" [overlapTrigger]="false">
<a mat-menu-item [routerLink]="['/planning/view']" (click)="linkFollow.emit()" *ngIf="showPlanningMenuView | async">Planning bekijken</a>
<a mat-menu-item [routerLink]="['/planning/edit']" (click)="linkFollow.emit()" *ngIf="showPlanningMenuEdit | async">Planning aanpassen</a>
</mat-menu>
<a mat-list-item [routerLink]="['/users']" (click)="linkFollow.emit()" *ngIf="showUsersButton | async">
<mat-icon mat-list-icon>people</mat-icon>
<h4 mat-line>Gebruikers</h4>
</a>
<a mat-list-item [routerLink]="['/hour-registration']" (click)="linkFollow.emit()" *ngIf="showHourRegistrationButton | async">
<mat-icon mat-list-icon>schedule</mat-icon>
<h4 mat-line>Uren Registratie</h4>
</a>
<a mat-list-item [routerLink]="['/employe-materials']" (click)="linkFollow.emit()" *ngIf="showEmployeeMaterials | async">
<mat-icon mat-list-icon>pan_tool</mat-icon>
<h4 mat-line>Werk benodigheden</h4>
</a>
<a mat-list-item [routerLink]="['/messages']" (click)="linkFollow.emit()" *ngIf="showMessageButton | async">
<mat-icon mat-list-icon>message</mat-icon>
<h4 mat-line>Berichten</h4>
</a>
我尝试过使用routerLinkActive =“active-list-item”,但结果相同+其他链接没有得到active-list-item类。
那么如何更改默认情况下未选择链接Gebruikers,或者如何使routerLinkActive工作?
所以我欺骗了一点,并在“mat-nav-list”下使用虚拟链接解决了我的问题
<div class="hidden">
<a mat-list-item [routerLink]="['/profile']">
<h4 mat-line></h4>
</a>
</div>
还有一些css要隐藏它。我不使用display:none或visabilty:false(不确定这是否是正确的)因为这样假人没有得到渲染,链接Gebruikers(用户)仍然被设置为active-list-item。
.hidden{
height: 1px;
opacity: 0;
}