这篇文章主要为大家详细介绍了Angluar+zorro实现无限级菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关于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
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.strHtml +=''; this.strHtml += ''; this.strHtml +='' + arr.menuName + '' ; this.strHtml +=''; //遍历到孩子的时候调用一个方法，循环把孩子全部遍历出来 this.strHtml += this.creatHtml(arr.child); this.strHtml += ' '; this.strHtml += ''; } //数据加载完毕之后重新渲染页面 this.ref.markForCheck(); }); } creatHtml(cArr): any { let str = ''; for (let i = 0; i ' + cArr[i].menuName +''; str += ' 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
