Angular 2 Aufruf Eltern Komponente aus verschachtelten TreeView Direktive Komponente

Question

Ich benutze TreeView Komponente von Torgeir Helgevold's post oder this Plunker geliehen. Ich versuche, Eltern Methoden von TreeView aufzurufen, wenn Sie auf einen Knoten doppelklicken, aber es funktioniert nur für den obersten Knoten. Hier ist, was ich bisher Eltern Component

@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 Komponente

@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 
} 

Das Problem ist, dass Kind-Knoten referent zu TreeItemRenderer Komponente und nicht-HierarchyMgmtComponent hat. Raten Sie in TreeItemRenderer Komponente benötigt so etwas wie (Bearbeitung) = "eltern.editStart ($ Ereignis)". Kann mir bitte jemand helfen. Vielen Dank.

Darüber hinaus habe ich mir bewusst bin, dass HierarchyMgmtComponent Komponente kann in TreeItemRenderer Komponente injiziert werden „die ich versucht habe, es und es funktioniert“, aber es ist nicht das, was ich suche.

Answer 1

Wenn Sie die Methode "Eltern" von einer beliebigen Ebene innerhalb der Hierarchie aus aufrufen möchten, müssen Sie Event-Handler in der gesamten Kette verdrahten.

Sehen Sie diese Plunker: plunker

Um die Knoten als Eltern ihre Kinder, verwenden die gleiche Syntax wie Sie für die Top-Level-tat verdrahten. Im Strukturansichtskomponente, ein Event-Handler-Verfahren (childObserverMethod) und in der Strukturansicht Klasse hinzuzufügen, ist ein Verfahren Handler hinzufügen, die das gleiche Ereignis als Elternteil (this.myParentObserverMethod.emit(node)) verdrahtet aussendet:

@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); 
    } 
} 

Edit:

Sie könnten myClickMethod erneut verwenden, anstatt eine andere Methode zu erstellen, z

@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) 
    } 
}