Angular 以递归方式重复模板，而不重复角度2中的组件

我从angular 2开始，我发现它很有趣。但从过去的几天里，我遇到了一些麻烦，我需要有人帮助我

情景：

我正在构建一个层次结构中带有复选框的选择框

A
|---A1
|---A2
     |---A2.1
     |---A2.2
           |.....
|.....

因此，web服务将以json格式返回此数据结构。因此，我不知道它将有多少层次化的子级

目前我所做的是：

@Component({
  selector: 'tree-view',
  template: `<ul>
    <li *ngFor="let items of data">
      <a href="javascript:void(0);"
      (click)="toggleMultiSelect($event,[items])">
        <input type="checkbox" name="{{items.name}}"
        [checked]="getChecked(items.id)"
        id="{{items.id}}">
        <label [attr.for]="items.id" class="custom-unchecked">{{items.name}}</label>
      </a>
      <tree-view
        *ngIf="items.children && items.children.size > 0"
        (isSelected)="resultChild($event)"
        [data]="items.children"></tree-view>
    </li>
  </ul>`,
  directives: [ MultiHierarchyTreeViewComponent ]
})

@组件({
选择器：“树视图”，
模板：`



`，
指令：[多层次目录组件]
})

所以我要做的是检查数据是否有子元素，然后它会再次重复选择器。这就带来了选择框的层次结构

但问题是我必须只重复模板，目前它是随着模板重复类，所以这使得全选，全选，父子选择操作困难

我以为

可以解决我的问题，但没有

---

为了解决这个问题，我打破了过去两天的头脑，但每次都得到了否定的回答。

我最近处理了一件类似的事情，对我来说，最好的方法是分别存储树数据结构和组件

树数据结构只是嵌套对象：

export interface TreeNodeInterface {
    parent: TreeNodeInterface;
    children: TreeNodeInterface[];
}

实现此接口的基本类如下所示（）：

然后渲染是一个单独的组件

我想这样做是因为我可以使用

*ngIf

显示/隐藏子树，因此即使使用非常大的树（假设您通常只看到整个树的一小部分），也可以轻松地保持DOM相对简单。这也让我可以轻松地在应用程序的不同部分重用同一棵树

我相信你也可以这样做，但是正如我所说的，保持树结构的独立对于我的用例来说效果更好

@Component({
    selector: 'ng2-treeview',
    directives: [ TreeViewComponent ],
    template: `
        ...
        <ng2-treeview *ngFor="let child of node.children" [node]="child"></ng2-treeview>
    `
})
export class TreeViewComponent implements TreeViewInterface, AfterViewInit
{
    @Input() node: TreeNodeInterface;        
    // ...
}

然后将

树上的每个
（单击）
组件

移交给服务：

nodeClick(event) {
    this.treeNodeService.click.emit(this.node.id);
}

---

最后，

DemoComponent

可以在构造函数中作为依赖项接收

treeNodeDevice

，并订阅

单击事件发射器。由于
DemoComponent
也可以是
TreeNodeDevice
的提供者，因此可以同时有多个独立的
TreeNodeDevice
实例。
我认为重复该组件将是最简单的方法。你也可以使用，但这对我来说更复杂。这个相关的问题可能会让你感兴趣，也可以查看@GünterZöchbauer好的，谢谢，我会尝试其中一个，让你知道：-）Martin很棒的文档，但我有一个问题，我已经做了类似的事情，并且正在正确地获取视图，但是我希望我的内部子模板只访问最顶层的组件方法和变量，以执行我的逻辑。目前，似乎每次重复模板时，都会创建单独的类实例。你知道怎么做吗？如果你需要任何其他澄清，请告诉我？@Rohit我更新了我的答案，我希望这就是你的意思。
@Component({
    selector: 'demo',
    directives: [TreeViewComponent],
    template: `
        <ng2-treeview [node]="textTreeView"></ms-treeview>
    `
})
export class DemoComponent {
    textTreeView = new TextTreeNode('Root node', null, [
        new TextTreeNode('Child node #1'),
        new TextTreeNode('Child node #2'),
        new TextTreeNode('Child node #3'),
        new TextTreeNode('Child node #4', null, [
            new TextTreeNode('Hello'),
            new TextTreeNode('Ahoy'),
            new TextTreeNode('Hola'),
        ]),
        new TextTreeNode('Child node #5'),
    ]);
}

import {EventEmitter, Injectable} from '@angular/core';

@Injectable()
export class TreeNodeService {
    click: EventEmitter<Object> = new EventEmitter();
}

nodeClick(event) {
    this.treeNodeService.click.emit(this.node.id);
}