[英]Angular2 tree checkbox with EventEmitter
我有树视图的问题,它有儿童复选框。 所以,问题是我从事件发射器获取嵌套的东西。 请看截图和代码。
这是我的自定义组件,我有递归,我只想传递选定的子或父。
零件
import { Component, Input, EventEmitter, Output } from '@angular/core';
@Component ({
selector: 'category-tree-view',
template: `
<ul class="tree">
<li *ngFor="let category of treeData">
<label class="control control--checkbox" *ngIf="hasCheckbox">
<input type="checkbox" [checked]="category.checked" (change)="selectedCategory(category, $event)" />
<div class="control__indicator"></div>
</label>
<span *ngIf="category.subcategories?.length" (click)="toggleChildren(category)" class="toggle">+</span>
{{category.name}}
<div class="tree-actions" *ngIf="hasActions">
<button class="btn btn-link edit" (click)="editCategory(category)">
<i class="icon-admin-edit"></i>
</button>
<button class="btn btn-link delete" (click)="deleteCategory(category)">
<i class="icon-admin-close"></i>
</button>
</div>
<category-tree-view [treeData]="category.subcategories" *ngIf="category.visible" (edit)="editCategory($event)" (delete)="deleteCategory($event)" [hasCheckbox]="hasCheckbox" (selected)="selectedCategory($event)" [hasActions]="hasActions"></category-tree-view>
</li>
</ul>
`
})
export class ProductCategoryTreeView {
@Input() treeData: any[];
@Input() hasCheckbox: boolean = false;
@Input() hasActions: boolean = false;
@Output() edit = new EventEmitter();
@Output() delete = new EventEmitter();
@Output() selected = new EventEmitter();
constructor() {}
toggleChildren(node: any) {
node.visible = !node.visible;
}
editCategory(category){
this.edit.emit(category);
}
deleteCategory(category) {
this.delete.emit(category);
}
selectedCategory(category, event) {
this.selected.emit({category, event});
}
}
这就是我在其他html页面中所拥有的内容,它是不同的组件,在本例中为product-form.component.html
<category-tree-view [treeData]="categories" (edit)="editCategory($event)" (delete)="deleteCategory($event)" (selected)="selectCategory($event)" [hasCheckbox]="true"></category-tree-view>
而且我只在组件product-form.component.ts中有方法
selectCategory(cat, event) {
console.log(cat, event);
}
这是我在控制日志数据时获得的屏幕截图。
您能否尝试使用以下代码并检查它是否有效?
selectedCategory(category, event) {
this.selected.emit(event);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.