ネストされたTreeViewディレクティブコンポーネントの角2の呼び出し親要素

Question

Torgeir Helgevold's postまたはthis Plunkerから借りたTreeViewコンポーネントを使用しています。私は任意のノードをダブルクリックするとTreeViewから親メソッドを呼び出そうとしますが、それはトップノードに対してのみ機能します。ここで私が持っているもので、これまで 親コンポーネント

@Component({ 
    selector: 'hierarchy-mgmt', 
    template: ' <div class="accounts-container col col-lg-3 col-md-4 col-xs-12"> 
     <h2>Managed Accounts</h2> 
       <tree-item-renderer [account]="commonNodeModel.rootNode" 
            (editing)="editStart($event)"> 
       </tree-item-renderer> 
    </div> 
       ', 
    providers: [TreeItemRendererComponent] 
}) 
export class HierarchyMgmtComponent implements OnInit {  
    //... constructor and other code 
    ngOnInit(): void { 
      this.nodeService.getNodesForUser() 
     .then((rootNode: CustomerNode) => { 
      this.commonNodeModel.RootNode = rootNode; 
      this.commonNodeModel.SelectedNode = rootNode; 
      return this.nodeService.getNodeValidationDetails(); 
     }) 
     .then((nodeValidationDetails: NodeValidationDetails) => { 
      this.commonNodeModel.NodeValidationDetails = nodeValidationDetails; 
      this.hierarchyLoaded = true; 
      console.log(this.commonUserModel.usersForSelectedNode); 
     }) 
     .catch(
      Utils.callFailureWithResponseDataFunction((failureResponse: any, hasBeenDisplayedToUser: any) => { 
       this.notifyService.notifyUserIfNecessary(hasBeenDisplayedToUser, "There was a problem initialising this page. Please contact Support"); 
      })); 
    } 
    editStart(node: CustomerNode) { 
     this.commonNodeModel.EditingNode = node; 
    } 
    // ... other code 
} 

TreeItemRendererコンポーネント

@Component({ 
    selector: 'tree-item-renderer', 
    template: ` 
     <div class="node"> 
      <span class="node-input" [ngClass]="getSelectedClass()" (dblclick)="edit(account)" (click)="spanSelected()" 
        title="{{account.name}}" [innerHtml]="account.name"></span> 
      <input type="text" class="editField" [ngModel]="account.name" placeholder="Enter an Account Name"> 
      <ul class="node-list"> 
       <li *ngFor="let account of account.children"> 
        <tree-item-renderer [account]="account" (editing)="editStart($event)"></tree-item-renderer> 
       </li> 
      </ul> 
     </div> 
    ` 
}) 

export class TreeItemRendererComponent implements OnInit { 

    @Output() 
    editing: EventEmitter<any> = new EventEmitter<any>(); 

    edit(node: any) { 
     this.editing.emit(node); 
    } 
    // ... other codes 
} 

問題は、その子ノードがTreeItemRendererコンポーネントとないにHierarchyMgmtComponentに参照先を持っています。 のTreeItemRendererのコンポーネントには、（編集）= "parents.editStart（$ event）"のようなものが必要です。誰も助けてください。ありがとうございました。

はまた、私は「私はそれを試してみました、それが働いている」TreeItemRendererコンポーネントに注入することができるHierarchyMgmtComponent部品の認識していますが、それは私が探していますものではありません。

Answer 1

階層内の任意のレベルから親メソッドを呼び出す場合は、イベントハンドラをチェーン全体にワイヤリングする必要があります。

このplunkerを参照してください：plunker

あなたはトップレベルのためにやったのと同じ構文を使用し、自分の子供の親としてのノードを配線します。ツリービューコンポーネントは、イベントハンドラメソッド（childObserverMethod）を追加し、ツリービュークラスに、親が（this.myParentObserverMethod.emit(node)）に配線されているのと同じイベントを発する方法ハンドラを追加：

@Component ({ 
    selector: 'tree-view', 
    directives: [TreeView], 
    template: ` 
    <ul> 
    <li *ngFor="#node of treeData" > 
     <span (click)="myClickMethod($event, node)">{{node.name}}</span> 
     <tree-view [treeData]="node.subnodes" (myParentObserverMethod)="childObserverMethod($event)"></tree-view> 
    </li> 
</ul> 
    ` 
}) 
export class TreeView { 
    @Input() treeData: []; 

    @Output() 
    myParentObserverMethod: EventEmitter<any> = new EventEmitter<any>(); 

    myClickMethod(event, node) 
    { 
     this.myParentObserverMethod.emit(node); 
     console.log("child - " + node.name) 
    } 

    childObserverMethod(node) 
    { 
     this.myParentObserverMethod.emit(node); 
    } 
} 

編集：

別のメソッドを作成するのではなく、myClickMethodを再利用することができます。

@Component ({ 
    selector: 'tree-view', 
    directives: [TreeView], 
    template: ` 
    <ul> 
    <li *ngFor="#node of treeData" > 
     <span (click)="myClickMethod($event, node)">{{node.name}}</span> 
     <tree-view [treeData]="node.subnodes" (myParentObserverMethod)="myClickMethod($event)"></tree-view> 
    </li> 
</ul> 
    ` 
}) 
export class TreeView { 
    @Input() treeData: []; 

    @Output() 
    myParentObserverMethod: EventEmitter<any> = new EventEmitter<any>(); 

    myClickMethod(event, node) 
    { 
     this.myParentObserverMethod.emit(node); 
     console.log("child - " + node.name) 
    } 
}