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源碼：點擊這裏