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, но без успеха
Любая помощь с этим это также было бы нормально, если бы существовала другая возможность пометить расширенное свойство как для активной ссылки