EventEmitterのAngular2ツリーチェックボックス

Question

子供のチェックボックスがあるツリービューに問題があります。ですから問題は、イベントエミッタからネストされたものを取得することです。スクリーンショットとコードをご覧ください。

これは再帰があるカスタムコンポーネントで、選択した子または親を渡したいだけです。

コンポーネント

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ページに持っているもの、製品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); 
} 

ここでは、そのデータをログに記録するときのスクリーンショットを示します。

Answer 1

あなたは以下のコードで試してみて、それが動作するかどうかをチェックしてくださいことはできますか？

selectedCategory(category, event) { 
    this.selected.emit(event); 
}