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

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为所选项目的数组。也许实际的对象更可行。为此，您必须执行以下操作

@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数组并使用自定义类来提供此解析器