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> 

나무 details.component.html

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

이 경우에는 루트 트리 세부 정보 만 표시됩니다.이 옵션을 선택하면 다른 노드 (반복적으로 생성 된 노드)에서 정보를 가져올 수 있습니까?

Answer 1

UPDATE :

그

쉽게 데모 - 응용 프로그램에서 볼 수는 : 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.component.html와

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