recursion - Angular2递归组件输出

Question

我有以下问题: 假设我有 Component A，它有两个 subcomponents Ar 和 Ad。 Subcomponent Ar 是递归创建的树，subcomponent Ad 是显示递归树中所选节点详细信息的组件(subcomponent Ar)。如何使用 @Output 将选定的节点从 Ar 中的子(子)组件发送到 Component Ad？应该是 @Output 还是其他什么？

app.component.html:

<tree [input]="fooTree" [output]="updateDetails($event)"></tree>
<tree-details [input]="input"></tree-details>

tree.component.html:

<tree [input]="fooTree.children"></tree>

tree-details.component.html

<div>{{input.name}}</div>
<div>{{input.id}}</div>

在这种情况下，我只会看到根树的详细信息，我如何才能从其他节点(递归创建的节点之一)获取信息，何时选择？

Answer 1

更新:

在演示应用程序中更容易看到:https://plnkr.co/edit/WaYluZyPaC0OEV0YovbC?p=preview

..

您的树组件 Ar 可以有一个@Ouput()。 您的 AppComponent 将使用此输出并将所选数据发布到第二个子组件 detail-component。

app.component.html

<tree (yourOutputNameHere)="yourFunctionToReceiveAndPostSelectedData($event)"></tree>
<details #yourDetailViewComponent></details>

tree.component.html

<tree (yourOutputNameHere)="yourFunctionToReceiveAndPostSelectedData($event)"></tree>

你的 tree-component 甚至可以有一个 @Input() 并且在你的模板中你可以做这样的事情:

app.component.html

<tree [detail-view-input]="yourDetailViewComponent"></tree>
<details #yourDetailViewComponent></details>

tree.component.html

<tree [detail-view-input]="detailViewInput"></tree>