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

【问题标题】：select only parent node treeview in angular 4仅在角度 4 中选择父节点树视图
【发布时间】：2017-08-21 10:53:15
【问题描述】：

我正在使用 Angular 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">

【问题讨论】：

您已经尝试过什么，发生了什么，您需要什么帮助？你能分享你的代码吗？此处的信息很难为您提供帮助。
我是 angular 4 的新手，上面提到的代码在 treeview 上运行良好，但是，我想在 angular 4 的这个 treeview 中只选择父节点作为我的功能

标签： angular treeview treeviewitem ngx-treeview

【解决方案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};

现在无论您在哪个模块中导入该模块，您都可以使用提供者数组和自定义类来提供此解析器

【讨论】：