Clarity Tree View - 以编程方式路由到节点

Question

我有一个基于 REST 调用动态构建的树视图。最初会提供完整的分类法，但我们可能会在稍后实施延迟加载。

有没有人有以下示例或至少有关于从哪里开始以下用例的建议：

我需要为特定节点路由到树中。如果 url 是 .../node2/child3/child5，我需要树打开这 3 个级别并自动 select 那个 Child5 节点项。
如果在没有路由的情况下打开树，让树自动展开第一层和 select 第一个根节点。

到目前为止我构建的树如下所示：

   <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 属性。

Clarity Tree View - 以编程方式路由到节点

Clarity Tree View - Programatically Routing to Nodes

vmware-clarity