Директива routerLinkActive не отображается в качестве ссылки в компоненте - PullRequest
0 голосов
/ 25 марта 2020

mf-multi-level-nav - компонент шаблона

<div class="mf-ml-nav-item" *ngFor="let link of links">
  <mat-divider *ngIf="link.separated" class="l-margin-bottom-8 l-margin-top-8"></mat-divider>
  <mat-expansion-panel *ngIf="link.children && !link.master; else simpleLink" [expanded]="rla.isActive" class="mat-elevation-z0 mf-ml-nav-item-expansion">
    <mat-expansion-panel-header class="mf-multi-level-nav-item-header" [replaceUrl]="false" routerLinkActive #rla="routerLinkActive" [routerLink]="link.path ? link.path : null" [routerLinkActiveOptions]="{ exact: false }" collapsedHeight="48px" expandedHeight="48px">
      {{link.label}}
    </mat-expansion-panel-header>
    <mf-multi-level-nav [links]="link.children"></mf-multi-level-nav>
  </mat-expansion-panel>
  <ng-template #simpleLink>
    <a mat-button class="mf-ml-nav-item-link" routerLinkActive="is-active" [routerLink]="[link.path]">{{link.label}}</a>
  </ng-template>
</div>

Проблема в том, что на странице видна только первая ссылка, остальные ссылки добавляются в DOM, но не видны (не найти никаких стилей, чтобы сделать их видимыми). Это перестает работать после обновления angular -материала и angular / cdk с версии 6.4.7 до 7.3.7 и отображается только в Chrome и Firefox в Edge, работает нормально.

  • Мое первое подозрение состоит в том, что rla видна в WebStorm как MAtExpansionPanelHeader, а не как routerLinkActive, хотя такое поведение было до обновления, а затем ссылки отображались корректно

  • Второе подозрение - это рекурсивный компонент структура, этот компонент рекурсивно вложен и, возможно, ссылка потеряна, попробуйте сделать что-то похожее на эту структуру -> https://gist.github.com/arniebradfo/5cf89c362cc216df6fc1d9ca4d536b72, но без успеха

Любая помощь с этим это также было бы нормально, если бы существовала другая возможность пометить расширенное свойство как для активной ссылки

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...