关于Angular+zorro 实现无限级菜单

关于Angluar + zorro 实现无限级菜单

该文章为思路+代码，为通用式前端无限级菜单。

首先通过后台接收到的数据是这样的

"table":[
    {
    "id": 1017.0,
    "menuName": "用户管理",
        "child":[{
            "id": 23.0,
            "menuName": "用户维护",
            "child": [{
                    "id": 24.0,
            		"menuName": "用户查看",
                    "child":[{
                   		    "id": 25.0,
            				"menuName": "用户增加",
                   			"child":[]
                    }]
                },
                {
                    "id": 25.0,
            		"menuName": "用户增加",
                    "child":[]
                }
            ]
        }]
    },
    {
    "id": 1018.0,
    "menuName": "微信管理",
    "child":[]    
    }
]

实现步骤如下:

1. uc-home.component.html

<!--
strHtml : 需要展示的数据
innerhtmlpipe ：添加管道，让数据拥有样式
-->
<div [innerHTML]="strHtml | innerhtmlpipe"></div>

2. 因为通过在component.ts进行数据拼接传到页面样式不会显示，所以使用Angular提供的管道让其有样式。

2.1新建一个管道

命令:ng g pipe innerhtmlpipePipe

2.2.

innerhtmlpipePipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'innerhtmlpipe'
})
export class InnerhtmlpipePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {}
  transform(value): any {
      //样式
    return this.sanitizer.bypassSecurityTrustHtml(value);
  }

}

3.uc-home.component.ts

import {Component, OnInit, ChangeDetectorRef} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';


@Component({
  selector: 'nb-uc-home',
  templateUrl: './uc-home.component.html',
  styleUrls: ['./uc-home.component.scss'],
  animations: [slideInAnimation]
})

export class UcHomeComponent implements OnInit {
    //定义一个 strHtml
    public  strHtml;
    //数据
    public menuArray = [];
    
     constructor(
     	private homeService: HomeService，
         private ref: ChangeDetectorRef
     ) {}
    ngOnInit() {
           //从后台接口获取数据，赋值给menuArray
   this.homeService.getMenu().subscribe(data => {
       //赋值数据
        this.menuArray = data.table;
           //初始化页面
        this.strHtml = '';
       //遍历每一个数据
  for (let i = 0; i < this.menuArray.length; i++) {
      
        const arr = this.menuArray[i];
//开始拼接页面
        this.strHtml += '<ul nz-menu [nzMode]="\'inline\'" style="height:auto" >';
      	this.strHtml +='<li nz-submenu>';
        this.strHtml += '<div menuEvent title>';
        this.strHtml +='<span type="laptop">' + arr.menuName + '</span>' ;
      	this.strHtml +='</div>';
      //遍历到孩子的时候调用一个方法，循环把孩子全部遍历出来
        this.strHtml += this.creatHtml(arr.child);
        this.strHtml += '</li>';
      	this.strHtml += '</ul>';
      }
        //数据加载完毕之后重新渲染页面
             this.ref.markForCheck();
      });      
    }

    
 creatHtml(cArr): any {
    let str = '';
    for (let i = 0; i < cArr.length; i++) {
      str += '<ul>';
      str += '<li nz-menu-item';
      str += '<div menuEvent>';
      str += '<span>' + cArr[i].menuName +'</span>';
      str += '</div>';
      str += '</li>';
      str += '</ul>';
    }
     //是否存在子集
    if (cArr.child) {
      str += this.creatHtml(cArr.child);
    }
    this.ref.markForCheck();
    return str;
  }
}