Angluar+zorro实现无限级菜单

关于Angular + zorro 实现无限级菜单，供大家参考，具体内容如下

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

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

"tablet;!--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; }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。