1

我有一个导航菜单。当我打开它时，按钮/链接 Gebruikers(users) 总是表现为一个活动列表项，但它不应该。

导航菜单

这是我的 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 工作？

4

2 回答 2

0

所以我作弊了一点，并解决了我在“mat-nav-list”下使用虚拟链接的问题

  <div class="hidden">
        <a mat-list-item [routerLink]="['/profile']">
            <h4 mat-line></h4>
        </a>
    </div>

还有一些CSS来隐藏它。我不使用 display:none 或 visabilty: false （不确定这是否正确），因为这样虚拟不会得到渲染，并且链接 Gebruikers(users) 仍然设置为活动列表项。

.hidden{
  height: 1px;
  opacity: 0;
}
于 2019-04-24T10:53:12.933 回答
0

我发现同时面临这个问题的一种解决方法是，您可以删除默认的悬停 css 并在单独的类中添加一个新的 css。将该类添加到每个 mat-list-item。

.mat-nav-list .mat-list-item:hover,
.mat-nav-list .mat-list-item:focus {
  background: transparent;
}

.menu-item:hover {
  background: rgba(0,0,0,.04) !important;
}
于 2022-03-03T11:49:30.187 回答