Question

我有一个基于REST调用动态构建的树视图。完整的分类法最初会交付，尽管我们稍后可能会实现延迟加载。

任何人都没有以下示例，或者至少对以下用例从何处开始有建议：

我需要路由到特定节点的树中。如果url是... / node2 / child3 / child5，我需要将树打开到这3个级别并自动选择那个Child5节点项。
如果在不进行路由的情况下打开树，请让树自动展开第一级并选择第一个根节点。

到目前为止，我构建的树看起来像这样：

   <clr-tree-node *ngIf="taxonomy">
                <ng-template #recursiveTree let-taxonomy>
                    <clr-tree-node *ngFor="let child of taxonomy">
                        <button (click)="openFile(child, null)" class="clr-treenode-link">
                            {{child.en_name}}
                        </button>
                        <ng-template [clrIfExpanded]="false" *ngIf="child.children?.length > 0">
                            <ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: child.children }"></ng-container>
                        </ng-template>
                    </clr-tree-node>
                </ng-template>
                <ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: taxonomy }"></ng-container>
            </clr-tree-node>

Answer 1

这是专门针对您的数据集的，因此通常，您需要解决的问题是知道应该将clrIfExpanded指令中的哪一个设置为true。在上面的示例中，您已将其硬编码为false。我建议您使用树本身的属性（例如node.expanded）来存储扩展状态，默认情况下设置为false。

然后，您必须检查路径和参数，加载数据，自己解析树并将node.expanded属性更改为true才能展开。因此，要更新您的示例：

<clr-tree-node *ngIf="taxonomy">
            <ng-template #recursiveTree let-taxonomy>
                <clr-tree-node *ngFor="let child of taxonomy">
                    <button (click)="openFile(child, null)" class="clr-treenode-link">
                        {{child.en_name}}
                    </button>
                    <ng-template [clrIfExpanded]="child.expanded" *ngIf="child.children?.length > 0">
                        <ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: child.children }"></ng-container>
                    </ng-template>
                </clr-tree-node>
            </ng-template>
            <ng-container *ngTemplateOutlet="recursiveTree; context:{ $implicit: taxonomy }"></ng-container>
        </clr-tree-node>

然后，您必须在从API加载数据结构后解析该数据结构，将其与路由参数进行比较，并为路由的任何部分切换child.expanded属性。

清晰树视图-以编程方式路由到节点

1 个答案: