"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":[] ? ?
? ? }
]

<!--
strHtml : 需要展示的数据
innerhtmlpipe ：添加管道，让数据拥有样式
-->
<div [innerHTML]="strHtml | innerhtmlpipe"></div>

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);
? }

}

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;
? }
}