关于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; } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。