angular - 角度递归 ng-template 仅在 UI 中显示被按下的项目的子项

Question

我有一个递归的 ng 模板：

<ng-template #recursiveNavList let-tabs="tabs" let-level="level">
            <ng-container *ngFor="let tab of tabs; let i = index">
                <a mat-tab-link
                   [routerLink]="[tab.category.facet]"
                   #rla="routerLinkActive"
                   [active]="rla.isActive"
                   routerLinkActive>
                        <span>
                            {{tab.category}}
                        </span>
                </a>

                <div *ngIf="tab.subCategories.length > 0 && (rla.isActive || tab.category.facet==='all')">
                    <ng-container *ngTemplateOutlet="recursiveNavList; context: { tabs: tab.subCategories, level: level + 1}"></ng-container>
                </div>

            </ng-container>
        </ng-template>

<ng-container *ngTemplateOutlet="recursiveNavList; context: { tabs: facetService.facets, level:0}"></ng-container>

我的 json 看起来像 -

[
{"category":{"facet":"inProcess","count":"1"},"subCategories":[]},
{"category":{"facet":"all","count":"2"},"subCategories":[{"category":{"facet":"conference","count":"2"},"subCategories":[{"category":{"facet":"paper","count":"1"},"subCategories":[]},{"category":{"facet":"poster","count":"1"},"subCategories":[]}]}]}
]

I should display sub categories in the UI only if his direct parent is selected (or if it's a direct child of "all")

一开始我希望看到：

处理所有会议

在用户按下会议后，他会看到

inProcess 所有会议论文海报

我在 div 上做了一个 if 条件，它只调用带有子类别的递归是 - (rla.isActive || tab.category.facet==='all)'。但问题是，如果用户点击“海报”，会议将关闭，因为现在该路线不活跃。

是否有任何简单的方法可以向“div”内的“if”添加一个条件，即如果他的子类别之一打开，则选项卡将保持打开状态？

我尽量避免添加打开某些标志的点击功能。

标签： angulartypescript