Question

我正在使用角度为4的ngx-treeview。这里我只想在点击它时选择父级。Picture所以，如何实现它

<ng-template #itemTemplate let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
<div class="form-check">
    <i *ngIf="item.children" (click)="onCollapseExpand()" aria-hidden="true" class="fa" [class.fa-caret-right]="item.collapsed"
        [class.fa-caret-down]="!item.collapsed"></i>
    <label class="form-check-label">
        <input type="checkbox" class="form-check-input" id="TreeViewCheckBox" value={{item.value}}
            [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [disabled]="item.disabled" (click)="treeviewSelectedValues($event)" />

        {{item.text}}
    </label>
</div></ng-template>
<ngx-treeview [config]="config" [items]="items" [itemTemplate]="itemTemplate">

Answer 1

您可以通过扩展TreeviewItem组件来实现

例如，我提交了具有此功能的PR，但它不是很活跃。这是一种解决方法。

import { TreeviewItem, TreeItem } from 'ngx-treeview';


export class CustomTreeviewItem extends TreeviewItem {
constructor(item: TreeItem, autoCorrectChecked?: boolean) {
super(item, autoCorrectChecked);
}

getSelection() {
const items = super.getSelection();
if (this.checked && this.children) {
items['checkedItems'].push(this);
} else {
items['uncheckedItems'].push(this);
}
return items;
}
}

现在，您可以在所有使用自定义组件的文件中将其作为TreeviewItem导入，而无需进行任何更改

我还有一种方法可以更改选择项目时返回的内容。当前，它发送一个ID为所选项目的ID数组。也许实际的对象更可行。为此，您必须执行以下操作

@Injectable()
export class CustomTreeViewEventParser extends TreeviewEventParser {
getSelectedChange(component: TreeviewComponent): any[] {
const checkedItems = this.getCheckedItems(component.items);
return checkedItems;
}

getCheckedItems(items: Array<TreeviewItem>) {
let array = new Array();
if (!items) {
  return array;
}

items.forEach(element => {
  if (element.checked) {
    array.push(element.value);// Here you can push anything you want - element for example. This is then what is emited on selectedChange
  }
});
return array;

}
}
export const treeviewEventParser = {provide: TreeviewEventParser, useClass: 
CustomTreeViewEventParser};

现在在导入模块的任何模块中，您都可以使用providers数组和自定义类来提供此解析器

在角度4中仅选择父节点树视图

1 个答案: