angular - 递归地使用组件本身来创建树

Question

你知道组件本身可以使用吗？如果是，在哪里可以阅读？

我有下一个情况:有 mainItems 列表，每个 Main Item 都有 subItem(看起来和 mainItem 一样)，每个 subItem 可以有它自己的 subItem 等等。所以最好使用嵌套，但是如何呢？

Answer 1

更新

forwardRef() 不再需要了，因为 directives 被移到了 NgModule.declarations 中，因此递归组件不需要将自己注册为 指令。

Angular 4.x.x Plunker example

原创

支持。您只需将组件添加到 directives: [] 的 @Component() 装饰器中。因为装饰器出现在类之前并且类在声明之前不能被引用 forwardRef() 是必要的。

import {Component, forwardRef, Input} from '@angular/core'

@Component({
  selector: 'tree-node',
  template: `
  <div>{{node.name}}</div>
  <ul>
    <li *ngFor="let node of node.children">
      <tree-node  [node]="node"></tree-node>
    </li>
  </ul>
`
})
export class TreeNode {
  @Input() node;
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <tree-node [node]="node"></tree-node>
    </div>
  `,
  directives: [TreeNode]
})
export class App {
  constructor() {
    this.name = 'Angular2 (Release Candidate!)'
  }

  node = {name: 'root', children: [
    {name: 'a', children: []},
    {name: 'b', children: []},
    {name: 'c', children: [
      {name: 'd', children: []},
      {name: 'e', children: []},
      {name: 'f', children: []},
     ]},
  ]};  
}

Angular 2.0.0-beta.x Plunker example

另见 Inject parent component of the same type as child component