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

Question

我是使用Kendo用户界面的角，其中有树视图拖放功能。这需要初始化两个树视图，并在第一个树的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> 

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

我该怎么做呢？

Answer 1

你能做的是以下几点。

在CustomTreeviewComponent中添加以下视图：

@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);
}