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]);
    }
  }

}

等有时间补上完整的文章!