Angular 2 从嵌套的 TreeView 指令组件调用父组件

Question

我正在使用从Torgeir Helgevold的帖子或这个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
}

树项渲染器组件

@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组件中的猜测需要类似 (edit(="parents.editStart($event(">之类的东西。谁能帮忙。谢谢。

此外，我知道HierarchyMgmtComponent组件可以注入到TreeItemRenderer组件中，"我已经尝试过并且它正在工作"，但这不是我想要的。

Answer 1

如果要从层次结构中的任何级别向下调用 parents 方法，则必须将事件处理程序一直连接到链中。

看到这个普伦克：普伦克

若要将节点作为父节点连接到其子节点，请使用与顶级相同的语法。在 TreeView 组件中，添加一个事件处理程序方法 (childObserverMethod(，在 TreeView 类中，添加一个方法处理程序，该方法处理程序发出与父级连接到的相同事件 (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)
}
}