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

菜单格式:

 [
{
"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源码:点击这里

angular2 递归导航菜单实现方式的更多相关文章

  1. 使用像AdminLTE的前端框架,树形导航菜单实现方式都有哪些?

    之前用easyui等富前端框架开发的时候都是使用封装好的县城的插件,现在使用最新的类似AdminLTE似的前段框架实现树形菜单都用什么方式? 后台拼接html然后前端用JS append方法添加还是直 ...

  2. vue+element UI递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

  3. vue+element UI以组件递归方式实现多级导航菜单

    介绍 这是一个是基于element-UI的导航菜单组件基础上,进行了二次封装的菜单组件,该组件以组件递归的方式,实现了可根据从后端接收到的json菜单数据,动态渲染多级菜单的功能. 使用方法 由于该组 ...

  4. html自定义垂直导航菜单(多级导航菜单,去掉font-awesome图标,添加自己的箭头图标)

    这次在原先html自定义垂直导航菜单的基础上做了比较大的改动: 1.去掉了font-awesome图标,上级菜单右边的箭头是自己用css写的,具体参考<css三角箭头>. 2.去掉了初始化 ...

  5. 前端框架bootstrap 表单和导航菜单的 Demo(第二篇)

    表单: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <tit ...

  6. 微信5.4安卓版重回ios风格 导航菜单都放底栏位置

    微信5.4安卓版发布更新了,由于本人的手机设置软件自动更新,中午的时候才发现微信换成了5.4版本,启动微信后是一个大大的“转账,就是发消息”,进入微信界面有点小惊喜,导航菜单都改为底部tab方式,顶部 ...

  7. 使用jQuery开发iOS风格的页面导航菜单

    在线演示1 本地下载     申请达人,去除赞助商链接 iOS风格的操作系统和导航方式现在越来越流行,在今天的jQuery教程中,我们将介绍如何生成一个iphone风格的菜单导航. HTML代码 我们 ...

  8. SharePoint开发 - 自定义导航菜单(一)菜单声明与配置

    博客地址 http://blog.csdn.net/foxdave 本篇描述自定义sharepoint菜单的一种方式,自定义菜单适用于一些门户等需求的网站 自定义的菜单有自己的数据源,可以是数据表,可 ...

  9. 使用CSS创建有图标的网站导航菜单

    在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不 ...

随机推荐

  1. 一次疏忽导致的bug

    NBB_PUT_SHORT 这个宏是按char* 类型算指针的实际工作中,没有注意这一点,输入指针类型 强转为了 SHORT* 导致 填充的内容错误 这是第一次在工作中遇到 指针类型相关的问题值得记录 ...

  2. windows10, 安装wamp无法启动服务的问题

    今天在另一台电脑上安装了wamp, 就是这个玩意 结果怎么也启动不起来, 上网上查了一下, 原因是有些windows10的系统上有安装IIS10, 这个也不知道是啥东西, 占用了80端口, 所以启动不 ...

  3. sk_buff封装和解封装网络数据包的过程详解(转载)

    http://dog250.blog.51cto.com/2466061/1612791 可以说sk_buff结构体是Linux网络协议栈的核心中的核心,几乎所有的操作都是围绕sk_buff这个结构体 ...

  4. python模拟登陆知乎并爬取数据

    一些废话 看了一眼上一篇日志的时间 已然是5个月前的事情了 不禁感叹光阴荏苒其实就是我懒 几周前心血来潮想到用爬虫爬些东西 于是先后先重写了以前写过的求绩点代码 爬了草榴贴图,妹子图网,后来想爬婚恋网 ...

  5. 用c和c++的方式实现栈

    #include <stdio.h> #include <stdlib.h> #include <assert.h> struct LinkNode { int d ...

  6. cvInRangeS函数演示

    camshift算法中,用到了cvInRangeS函数,作为初学者,对这个函数很不理解,所以就写了个程序演示效果,加强理解. 代码: #include "cv.h" #includ ...

  7. 开启 mysql 远程访问

    如何开启MySQL的远程帐号-1)首先以 root 帐户登陆 MySQL 在 Windows 主机中点击开始菜单,运行,输入“cmd”,进入控制台,然后cd 进入MySQL 的 bin 目录下,然后输 ...

  8. linuxMint下面的截图工具

    sudo apt-get install shutter 然后配合系统快捷键,我定义的和qq的截屏一样的.用着感觉很舒服.

  9. 通过外部配置文件做mybatis的基础配置,以及Mapper代理接口的实现

    1.通过外部配置文件做mybatis的基础性的配置. 1)先编写config.properties的文件(做一些动态的配置). 配置的内容如下: jdbc.jdbcUrl=jdbc:oracle:th ...

  10. Android studio 分析内存泄漏

    以前用eclipse的时候,我们采用的是DDMS和MAT,不仅使用步骤复杂繁琐,而且要手动排查内存泄漏的位置,操作起来比较麻烦.后来随着Android studio的潮流,我也抛弃了eclipse加入 ...