如何在模板中禁用部分组件定义

Question

我试图使用Telerik (TreeView)中的组件，并希望能够启用或禁用模板中的配置部分以删除某些功能。如果是常规代码，我可以使用*ngIf，但不确定如何使用。或者是执行并必须为该组件专用fulle模板的唯一方法。

<kendo-treeview
    #treeView
        [nodes]="data"
        textField="text"
        formControlName="permission"
        kendoTreeViewHierarchyBinding
        childrenField="child"
        [filterable]="true"
        kendoTreeViewExpandable
        [expandedKeys]="expandedKeys"
        [expandBy]="'text'"
        [kendoTreeViewCheckable]="checkableSettings"
        (checkedChange)="handleChecking($event)"
        [(checkedKeys)]="checkedKeys"
        checkBy="guid"
        
       <--- Section to enable or disable based on value enableDragDrop --->
        kendoTreeViewDragAndDrop
        kendoTreeViewDragAndDropEditing
        (nodeDragStart)="log('nodeDragStart', $event)"
        (nodeDrag)="log('nodeDrag', $event)"
        (nodeDrop)="handleDrop($event)"
        (addItem)="log('addItem', $event)"
        (removeItem)="log('removeItem', $event)"
        (nodeDragEnd)="log('nodeDragEnd', $event)"
        (nodeClick)="log3('nodeClick', $event)"
       <--- End of Section to enable --->
        
        >
    </kendo-treeview>  

Answer 1

不过，在这种情况下，使用*ngIf简单地转换布尔值应该是合适的，这是有点重复的代码。

在T中。

enableDragDrop: boolean = true;

在html中

<ng-container *ngIf="enableDragDrop; else noDragAndDrop"
   <kendo-treeview
        #treeView
        [nodes]="data"
        textField="text"
        formControlName="permission"
        kendoTreeViewHierarchyBinding
        childrenField="child"
        [filterable]="true"
        kendoTreeViewExpandable
        [expandedKeys]="expandedKeys"
        [expandBy]="'text'"
        [kendoTreeViewCheckable]="checkableSettings"
        (checkedChange)="handleChecking($event)"
        [(checkedKeys)]="checkedKeys"
        checkBy="guid"
        
        kendoTreeViewDragAndDrop
        kendoTreeViewDragAndDropEditing
        (nodeDragStart)="log('nodeDragStart', $event)"
        (nodeDrag)="log('nodeDrag', $event)"
        (nodeDrop)="handleDrop($event)"
        (addItem)="log('addItem', $event)"
        (removeItem)="log('removeItem', $event)"
        (nodeDragEnd)="log('nodeDragEnd', $event)"
        (nodeClick)="log3('nodeClick', $event)">
   </kendo-treeview>
</ng-container>

<ng-template #noDragAndDrop>
   <kendo-treeview
        #treeView
        [nodes]="data"
        textField="text"
        formControlName="permission"
        kendoTreeViewHierarchyBinding
        childrenField="child"
        [filterable]="true"
        kendoTreeViewExpandable
        [expandedKeys]="expandedKeys"
        [expandBy]="'text'"
        [kendoTreeViewCheckable]="checkableSettings"
        (checkedChange)="handleChecking($event)"
        [(checkedKeys)]="checkedKeys"
        checkBy="guid"
   </kendo-treeview>
</ng-template>

Answer 2

可以在boolean执行过程中使用event binding属性。

例如：

let enableDragDrop = false;

这是要在component.ts中使用的属性。

在您的template中，在kendo-treeview标记中

(nodeDragStart)="enableDragDrop && log('nodeDragStart', $event)"

我们使用&&来确保在enableDragDrop为真之前不会执行log()函数。

property绑定也是如此。

[kendoTreeViewDragAndDrop]="enableDragDrop"

就像这样简单，我希望这就是你想要的。