Javascript 角度2中的Treeview-在组件之间包含和传递整个对象的备选方案

我正在尝试在angular 2中创建一个树状视图。它是一个带有添加和删除按钮的文本框树。我在Angular 1中运行了它，但在Angular 2中它似乎很复杂

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

Ng include在angular 2中不存在。所以我尝试使用@Input在组件之间传递数据。但是每次都会创建对象的新实例，这会覆盖以前的数据

---

在Angular 2中有没有办法解决这个问题

假设

树

是嵌套结构，在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;
}

导出接口树{
节点：树；
}
@组成部分({
选择器：“树视图”，
模板：`

`
})
导出类TreeView组件{
@Input（）公共树：树；
}

根据您的具体结构，它将按以下方式进行：

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: []});
    }
}

导出类树数据{
答：字符串；
儿童：TreeData[]；
构造函数（答案：string，子项：TreeData[]）{
这个答案=答案；
这个孩子=孩子；
}
}
@组成部分({
选择器：“树视图”，
模板：`


添加节点
`
})
导出类TreeView组件{
@Input（）公共树：TreeData[]；
public newAnswers=Array=[]；
公共添加（应答：字符串，节点：TreeData）{
node.child.push（{answer，child:[]}）；
}
}

假设

树

是嵌套结构，在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;
}

导出接口树{
节点：树；
}
@组成部分({
选择器：“树视图”，
模板：`

`
})
导出类TreeView组件{
@Input（）公共树：树；
}

根据您的具体结构，它将按以下方式进行：

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: []});
    }
}

导出类树数据{
答：字符串；
儿童：TreeData[]；
构造函数（答案：string，子项：TreeData[]）{
这个答案=答案；
这个孩子=孩子；
}
}
@组成部分({
选择器：“树视图”，
模板：`


添加节点
`
})
导出类TreeView组件{
@Input（）公共树：TreeData[]；
public newAnswers=Array=[]；
公共添加（应答：字符串，节点：TreeData）{
node.child.push（{answer，child:[]}）；
}
}

我的模板中有这样一个节点：添加节点。而我在.ts中的add函数是：this.data[index].child.push（{答案：inputData，child:[]）；我的结构是nt RETAINE我在公共文件中为结构创建了一个类：导出类TreeData{answer:string；child:TreeData[]；构造函数（answer:string，child:TreeData[]）{this.answer=answer；this.child=child；}}应该

inputData

是

答案
from
TreeData
？或者它是附加组件的输入？是。两者都表示用户输入的输入字符串。是。但是每个孩子的答案和输入的数据有什么不同呢？您的add函数是什么样子的？在我的代码中，没有保留完整的树结构。因此，当我单击“添加节点”按钮时，只显示当前对象，因为以前的内容已丢失。我的模板中有以下内容：添加节点。而我在.ts中的add函数是：this.data[index].child.push（{答案：inputData，child:[]）；我的结构是nt RETAINE我在公共文件中为结构创建了一个类：导出类TreeData{answer:string；child:TreeData[]；构造函数（answer:string，child:TreeData[]）{this.answer=answer；this.child=child；}}应该
inputData
是
答案
from
TreeData
？或者它是附加组件的输入？是。两者都表示用户输入的输入字符串。是。但是每个孩子的答案和输入的数据有什么不同呢？您的add函数是什么样子的？在我的代码中，没有保留完整的树结构。因此，当我单击“添加节点”按钮时，只显示当前对象，因为以前的内容丢失了。