Angular4菜单功能
|最近学完了Angular4基础知识，然后想做一个简单的小项目，就是二级菜单，这个东西我没做过的，但是我需要一段时间去研究一下，应该差不多完成了小项目。
首先安装Angular cli
npm install -g @angular/cli
创建一个文件工程
ng new my-app
启动服务
cd my-app
ng serve --open
menu.ts
//菜单数据
export class MenuData {
//ID
id: number;
//父ID
parentId: number;
//名称
name: string;
//是否展开
isExpend?: boolean;
//URL
url?: string;
//子节点
children?: Array<MenuData>;
}
app.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
//import { MainData,MenuData} from './main.model';
import { MenuData } from './menu';
import { MenuService } from './menu.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [ MenuService ]
})
export class AppComponent implements OnInit{
title = 'Menu菜单测试';
//获取菜单的数据
menu = this.menu;
/**
* 构造方法
*/
constructor(
private router: Router, private menuService: MenuService) { }
/**
* 初始化
*/
ngOnInit() {
this.menuService.getJSON().subscribe(data => {
this.menu = data;
//console.log(data);
})
}
/**
* 是否有子节点
* @param one
*/
isLeaf(one: MenuData) {
return !one.children || !one.children.length;
}
/**
* 点击
* @param one
*/
itemClicked(one: MenuData) {
if (!this.isLeaf(one)) {
one.isExpend = !one.isExpend;
} else {
this.router.navigate([one.url]);
}
}
}