Angluar+zorro實(shí)現(xiàn)無(wú)限級(jí)菜單

更新時(shí)間：2022年03月25日 15:57:42 作者：武中奇

這篇文章主要為大家詳細(xì)介紹了Angluar+zorro實(shí)現(xiàn)無(wú)限級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

關(guān)于Angular + zorro 實(shí)現(xiàn)無(wú)限級(jí)菜單，供大家參考，具體內(nèi)容如下

該文章為思路+代碼，為通用式前端無(wú)限級(jí)菜單。

首先通過(guò)后臺(tái)接收到的數(shù)據(jù)是這樣的

"table":[
? ? {
? ? "id": 1017.0,
? ? "menuName": "用戶管理",
? ? ? ? "child":[{
? ? ? ? ? ? "id": 23.0,
? ? ? ? ? ? "menuName": "用戶維護(hù)",
? ? ? ? ? ? "child": [{
? ? ? ? ? ? ? ? ? ? "id": 24.0,
? ? ? ? ? ? ?? ??? ?"menuName": "用戶查看",
? ? ? ? ? ? ? ? ? ? "child":[{
? ? ? ? ? ? ? ? ? ??? ??? ? ? ?"id": 25.0,
? ? ? ? ? ? ?? ??? ??? ??? ?"menuName": "用戶增加",
? ? ? ? ? ? ? ? ? ??? ??? ??? ?"child":[]
? ? ? ? ? ? ? ? ? ? }]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "id": 25.0,
? ? ? ? ? ? ?? ??? ?"menuName": "用戶增加",
? ? ? ? ? ? ? ? ? ? "child":[]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }]
? ? },
? ? {
? ? "id": 1018.0,
? ? "menuName": "微信管理",
? ? "child":[] ? ?
? ? }
]

實(shí)現(xiàn)步驟如下:

1. uc-home.component.html

<!--
strHtml : 需要展示的數(shù)據(jù)
innerhtmlpipe ：添加管道，讓數(shù)據(jù)擁有樣式
-->
<div [innerHTML]="strHtml | innerhtmlpipe"></div>

2. 因?yàn)橥ㄟ^(guò)在component.ts進(jìn)行數(shù)據(jù)拼接傳到頁(yè)面樣式不會(huì)顯示，所以使用Angular提供的管道讓其有樣式。

2.1新建一個(gè)管道

命令: 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 {
? ? //定義一個(gè) strHtml
? ? public ?strHtml;
? ? //數(shù)據(jù)
? ? public menuArray = [];
? ??
? ? ?constructor(
? ? ??? ?private homeService: HomeService，
? ? ? ? ?private ref: ChangeDetectorRef
? ? ?) {}
? ? ngOnInit() {
? ? ? ? ? ?//從后臺(tái)接口獲取數(shù)據(jù)，賦值給menuArray
? ?this.homeService.getMenu().subscribe(data => {
? ? ? ?//賦值數(shù)據(jù)
? ? ? ? this.menuArray = data.table;
? ? ? ? ? ?//初始化頁(yè)面
? ? ? ? this.strHtml = '';
? ? ? ?//遍歷每一個(gè)數(shù)據(jù)
? for (let i = 0; i < this.menuArray.length; i++) {
? ? ??
? ? ? ? const arr = this.menuArray[i];
//開(kāi)始拼接頁(yè)面
? ? ? ? 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>';
? ? ? //遍歷到孩子的時(shí)候調(diào)用一個(gè)方法，循環(huán)把孩子全部遍歷出來(lái)
? ? ? ? this.strHtml += this.creatHtml(arr.child);
? ? ? ? this.strHtml += '</li>';
? ? ? ?? ?this.strHtml += '</ul>';
? ? ? }
? ? ? ? //數(shù)據(jù)加載完畢之后重新渲染頁(yè)面
? ? ? ? ? ? ?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;
? }
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: