剑道树视图拖放使用相同的树组件

Posted 2023-05-07

【中文标题】剑道树视图拖放使用相同的树组件

【英文标题】：Kendo tree view drag and drop using same tree componant

【发布时间】：2021-07-16 18:07:38

【问题描述】：

我正在使用 Kendo UI for Angular，它具有树视图拖放功能。 这需要初始化两个树视图，并将另一个的实例包含在第一棵树的 dropZoneTreeViews 中。

当我在我的 html 页面中使用两个树视图并为它们分配每个不同的 ID 以供使用时，这非常有效。

<div>
<kendo-treeview #listA 
    [dropZoneTreeViews]="[listB]" 
    kendoTreeViewDragAndDrop
    kendoTreeViewFlatDataBinding 
                            .
                            .
                            .>
</kendo-treeview>

<kendo-treeview #listB 
    [dropZoneTreeViews]="[listA]" 
    kendoTreeViewDragAndDrop
    kendoTreeViewFlatDataBinding 
                            .
                            .
                            .>
</kendo-treeview>
</div>

现在我需要实现的是为树视图创建一个单独的组件，并将它用于像这样的两个树视图

<app-tree-view #listA [dropZoneTreeViews]="[listB]"
.
.></app-tree-view> 

<app-tree-view #listB [dropZoneTreeViews]="[listA]
.
."></app-tree-view> 

我使用 @Input dropZoneTreeViews 将数据传递给放置区以及其他数据，但我无法使用 dropZoneTreeViews 链接两个树视图，因为它不再识别另一棵树的实例。

我应该如何处理这个？

【参考方案1】：

你可以做的如下。

在您的 CustomTreeviewComponent 中添加以下 ViewChild：

@ViewChild(DragAndDropDirective) dragDrop: DragAndDropDirective;
@ViewChild(TreeViewComponent) treeview: TreeViewComponent;

然后在父组件中：

@ViewChild('listA') listA: CustomTreeviewComponent;
@ViewChild('listB') listB: CustomTreeviewComponent;
    
ngAfterViewInit(): void 
  this.listA.dragDrop.dropZoneTreeViews.push(this.listB.treeview);
  this.listB.dragDrop.dropZoneTreeViews.push(this.listA.treeview);