角度2のツリービュー - ng-includeとコンポーネント間でオブジェクト全体を渡す代わりの方法

Question

角度2でツリービューを作成しようとしています。追加ボタンと削除ボタンが付いたテキストボックスのツリーです。私は、角度1で実行してそれを得たが、それは、角2

角度1 HTMLコード内の道の複雑なようだ：

<script type="text/ng-template" id="tree_item_renderer.html"> 
    <input type="text" ng-model="data.answer" placeholder="Answer" required/> 
    <button ng-click="add(data)">Add node</button> 
    <button ng-click="delete(data)" ng-show="data.nodes.length > 0">Delete nodes</button> 
    <ul> 
     <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'"></li> 

    </ul> 
</script> 

<ul ng-app="Application" ng-controller="TreeController"> 
    <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'"></li> 
</ul> 

Javascriptコード：

angular.module("myApp", []). 
controller("TreeController", ['$scope', function($scope) { 
    $scope.delete = function(data) { 
     data.nodes = []; 
    }; 
    $scope.add = function(data) { 
     data.nodes.push({answer:'',nodes: []}); 
    }; 
    $scope.tree = [{answer:'', nodes: []}]; 
}]); 

NG-含んは角にありません2. @Inputを使ってコンポーネント間でデータを渡そうとしました。しかし、オブジェクトの新しいインスタンスは、以前のデータを上書きするたびに作成されます！

角度2でこれに取り組む方法はありますか？ treeと仮定すると

Answer 1

はAngular2 +に私たちは再帰を達成するために、そのテンプレートでのコンポーネントのタグを使用することができ、ネストされた構造である：あなたの具体的な構成とすることにより

export interface Tree { 
    nodes: Tree; 
} 

@Component({ 
    selector: 'tree-view', 
    template: `<ul><li *ngFor="let node of tree.nodes"> 
       <tree-view [tree]="node"></tree-view></li></ul>` 
}) 
export class TreeViewComponent { 
    @Input() public tree: Tree; 
} 

それはこの道を行く：

export class TreeData { 
    answer: string; 
    child: TreeData[]; 

    constructor(answer: string, child: TreeData[]) { 
     this.answer = answer; 
     this.child = child; 
    } 
} 

@Component({ 
    selector: 'tree-view', 
    template: `<ul> 
     <li *ngFor="let eachChild of tree; let i = index"> 
     <input type="text" [(ngModel)]="newAnswers[i]" placeholder="Answer" required> 
     <button (click)="add(newAnswers[i], eachChild)">Add node</button> 
     <tree-view [tree]="eachChild.child"></tree-view> 
    </li></ul>` 
}) 
export class TreeViewComponent { 
    @Input() public tree: TreeData[]; 
    public newAnswers = Array<string> = []; 

    public add(answer: string, node: TreeData) { 
     node.child.push({answer, child: []}); 
    } 
}