angular2 递归导航菜单实现方式

看了网上很多源码，基本都是采用循环三级的方式。如果是无限级的菜单，就无法实现了。

 

菜单格式：

 [
            {
                "title": "Item-1",
                "iconClass": "fa fa fa-flask",
                "link": "#1",
                "notice": 0,
                "subMenus": null
            },
            {
                "title": "Item-2", "iconClass": "fa fa-level-down", "link": null, "notice": 0,
                "subMenus": [
                    {
                        "title": "Item-2-1",
                        "iconClass": "fa fa fa-flask",
                        "link": "#2",
                        "notice": 0,
                        "subMenus": null
                    }, {
                        "title": "Item-2-2",
                        "iconClass": "fa fa fa-flask",
                        "link": "#3",
                        "notice": 0,
                        "subMenus": null
                    }]
            },
            {
                "title": "Item-3", "iconClass": "fa fa-level-down", "link": null, "notice": 4,
                "subMenus": [
                    {
                        "title": "Item-3-1",
                        "iconClass": "fa fa fa-flask",
                        "link": "#4",
                        "notice": 1,
                        "subMenus": null
                    },
                    {
                        "title": "Item-3-2",
                        "iconClass": "fa fa fa-flask",
                        "link": null,
                        "notice": 3,
                        "subMenus": [
                            {
                                "title": "Item-3-2-1",
                                "iconClass": "fa fa fa-flask",
                                "link": "#6",
                                "notice": 1,
                                "subMenus": null
                            },
                            {
                                "title": "Item-3-2-2",
                                "iconClass": "fa fa fa-flask",
                                "link": "#7",
                                "notice": 2,
                                "subMenus": [
                                    {
                                        "title": "Item-4-2-1",
                                        "iconClass": "fa fa fa-flask",
                                        "link": "#6",
                                        "notice": 1,
                                        "subMenus": null
                                    },
                                    {
                                        "title": "Item-4-2-2",
                                        "iconClass": "fa fa fa-flask",
                                        "link": "#7",
                                        "notice": 2,
                                        "subMenus": [
                                            {
                                                "title": "Item-5-2-1",
                                                "iconClass": "fa fa fa-flask",
                                                "link": "#6",
                                                "notice": 1,
                                                "subMenus": null
                                            },
                                            {
                                                "title": "Item-5-2-2",
                                                "iconClass": "fa fa fa-flask",
                                                "link": "#7",
                                                "notice": 2,
                                                "subMenus": null
                                            }]
                                    }]
                            }]
                    }]
            }
        ];

 

AppComponent.ts代码：

import { Component } from '@angular/core';
import {TreeViewComponent} from './treeview/treeview.component';
import {MenuItem} from './treeview/menuItem';;
@Component({
    selector: 'my-app',
    template: '<ul tree-view [directories]="directories"></ul>',
    directives: [TreeViewComponent]
})
export class AppComponent {
    directories: MenuItem[];
    constructor() {
        this.directories = [
            {
                "title": "Item-1",
                "iconClass": "fa fa fa-flask",
                "link": "#1",
                "notice": 0,
                "subMenus": null
            },
            {
                "title": "Item-2", "iconClass": "fa fa-level-down", "link": null, "notice": 0,
                "subMenus": [
                    {
                        "title": "Item-2-1",
                        "iconClass": "fa fa fa-flask",
                        "link": "#2",
                        "notice": 0,
                        "subMenus": null
                    }, {
                        "title": "Item-2-2",
                        "iconClass": "fa fa fa-flask",
                        "link": "#3",
                        "notice": 0,
                        "subMenus": null
                    }]
            },
            {
                "title": "Item-3", "iconClass": "fa fa-level-down", "link": null, "notice": 4,
                "subMenus": [
                    {
                        "title": "Item-3-1",
                        "iconClass": "fa fa fa-flask",
                        "link": "#4",
                        "notice": 1,
                        "subMenus": null
                    },
                    {
                        "title": "Item-3-2",
                        "iconClass": "fa fa fa-flask",
                        "link": null,
                        "notice": 3,
                        "subMenus": [
                            {
                                "title": "Item-3-2-1",
                                "iconClass": "fa fa fa-flask",
                                "link": "#6",
                                "notice": 1,
                                "subMenus": null
                            },
                            {
                                "title": "Item-3-2-2",
                                "iconClass": "fa fa fa-flask",
                                "link": "#7",
                                "notice": 2,
                                "subMenus": [
                                    {
                                        "title": "Item-4-2-1",
                                        "iconClass": "fa fa fa-flask",
                                        "link": "#6",
                                        "notice": 1,
                                        "subMenus": null
                                    },
                                    {
                                        "title": "Item-4-2-2",
                                        "iconClass": "fa fa fa-flask",
                                        "link": "#7",
                                        "notice": 2,
                                        "subMenus": [
                                            {
                                                "title": "Item-5-2-1",
                                                "iconClass": "fa fa fa-flask",
                                                "link": "#6",
                                                "notice": 1,
                                                "subMenus": null
                                            },
                                            {
                                                "title": "Item-5-2-2",
                                                "iconClass": "fa fa fa-flask",
                                                "link": "#7",
                                                "notice": 2,
                                                "subMenus": null
                                            }]
                                    }]
                            }]
                    }]
            }
        ];
    }
}

 这里有人也许有人会问 directives 指令描述了 TreeViewComponent 组件，为什么我的 template  里面没提供的 <tree-view></tree-view>之类的自定义标签。细心的朋友会发现 ul 里有 tree-view  。没错，这事Angular2的另一种组件选择方式写法。如果采用自定义标签的方式，那么在原有的样式中，可能因为代码中多了<tree-view></tree-view> 会导致原来的样式失效了。

 

例如：

<style>
    div > ul > li {
        color: #0094ff;
    }
    
    ...
</style>
<div>
    <ul>
        <li>
            ...
        </li>
    </ul>
</div>

<!-- 加入 <tree-view></tree-view> 后 -->


<div>
    <tree-view>
        <ul>
            <li>
                ...
            </li>
        </ul>
    </tree-view>
</div>

 

 app/treeview/treevieww.component.ts代码：

import { Component, OnInit, Input } from '@angular/core';
import {MenuItem} from './menuItem';

@Component({
    moduleId: module.id,
    selector: '[tree-view]',
    templateUrl: 'treeview.component.html',
    directives: [TreeViewComponent],
})
export class TreeViewComponent implements OnInit {
    @Input() directories: MenuItem[];

    constructor() { }

    ngOnInit() { }

}

 使用自定义标签的选择方式，那么selector 选择器就不需要加上 [ ... ] 中括号。

 

 

最后结果：

 

 

oschina源码：点击这里