使用递归树视图组件Angular2

时间:2016-09-12 16:05:28

标签: angular typescript treeview angular2-template angular2-directives

我正在尝试在Angular2中实现treeview,这是我的treeview组件:

import {Component, Input} from 'angular2/core';

@Component ({
 selector: 'tree-view',
 directives: [TreeView],
 template: `
 <ul>
   <li *ngFor="#node of treeData">
   {{node.name}}
   <tree-view [treeData]="node.subnodes"></tree-view>
  </li>
 </ul>
`
})
export class TreeView {
   @Input() treeData: any[];
}

这是我的组件:

import {Component} from 'angular2/core';
import {TreeView} from './tree-view.component';

@Component({
    selector: 'my-app',
    directives: [TreeView],
    template: `
    <h1>Tree as UL</h1>
    <tree-view [treeData]=myTree></tree-view>
    `
})
export class AppComponent { 
  myTree =     [
        {name:"parent1", subnodes:[]},
        {name:"parent2", 
            subnodes:[
                    {name:"parent2_child1", subnodes:[]}
                 ]},
        {name:"parent3", 
            subnodes:[
                    {name:"parent3_child1", 
                        subnodes:[
                                {name:"parent3_child1_child1", subnodes:[]}
                             ]
                    }
                 ]
        }
    ];
}

这是我得到的错误:

localhost/:18 Error: ReferenceError: TreeView_1 is not defined(…)

我已经尝试过forwardRef解决方案而且它没有用。

谢谢。

0 个答案:

没有答案