"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)橥ㄟ^在component.ts進(jìn)行數(shù)據(jù)拼接傳到頁面樣式不會(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;
? ? ? ? ? ?//初始化頁面
? ? ? ? this.strHtml = '';
? ? ? ?//遍歷每一個(gè)數(shù)據(jù)
? 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>';
? ? ? //遍歷到孩子的時(shí)候調(diào)用一個(gè)方法，循環(huán)把孩子全部遍歷出來
? ? ? ? this.strHtml += this.creatHtml(arr.child);
? ? ? ? this.strHtml += '</li>';
? ? ? ?? ?this.strHtml += '</ul>';
? ? ? }
? ? ? ? //數(shù)據(jù)加載完畢之后重新渲染頁面
? ? ? ? ? ? ?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;
? }
}

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

您可能感興趣的文章: