Angluar+zorro实现无限级菜单
时间：2022-12-09 09:56:08|栏目：AngularJS|点击： 次
关于Angular + 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;
}
}
