Question

我有以下问题：我们假设Component A有两个subcomponents Ar和Ad。 Subcomponent Ar是递归创建的树，subcomponent Ad是显示递归树（subcomponent Ar）中选择节点的详细信息的组件。如何使用Ar将所选节点从Component Ad中的子（子）组件发送到@Output？它应该是@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>

树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>

Angular2递归组件输出

1 个答案: