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

..

您的tree-component 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>