Angular二级导航栏

1,将菜单放入数据库：
模拟放到该路径下：
src/assets/json/header.json

{"siteName": "PGG娱乐健身中心","menu":[{"id":"1","menuName":"首页","menuChildren": [{}],"showSubMenu": false},{"id":"2","menuName":"健身中心","menuChildren": [{"itemId": "1","menuChidrenItem": "居室器械健身"},{"itemId": "2","menuChidrenItem": "野外运动"},{"itemId": "3","menuChidrenItem": "健身小知识"}],"showSubMenu": false},{"id":"3","menuName":"休闲娱乐","menuChildren": [{"itemId": "1","menuChidrenItem": "养生钓鱼"},{"itemId": "2","menuChidrenItem": "野炊烧烤"},{"itemId": "3","menuChidrenItem": "真人野战"}],"showSubMenu": false},{"id":"4","menuName":"订单中心","menuChildren": [{"itemId": "1","menuChidrenItem": "所有订单"},{"itemId": "2","menuChidrenItem": "已完成订单"},{"itemId": "3","menuChidrenItem": "未完成订单"}],"showSubMenu": false},{"id":"5","menuName":"个人中心","menuChildren": [{"itemId": "1","menuChidrenItem": "用户信息修改"}],"showSubMenu": false}]
}

ts接受数据，并处理：

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpClientModule } from '@angular/common/http';@Component({selector: 'app-header',templateUrl: './header.component.html',styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {headData: any;constructor(private http: HttpClient) { }ngOnInit(): void {// http://localhost:4200/assets/json/header.json 可访问this.http.get('/assets/json/header.json').subscribe(data => {this.headData = data;console.log(this.headData.menu);});}showSubMenu(item: any, index: any): void {// 设置当前子菜单显示item.showSubMenu = true;}notShowSubMenu(item: any, index: any): void {// 设置当前子菜单不显示item.showSubMenu = false;}
}

html显示控制，利用ngstyle控制:

<div class="menu_container"><div id="top_title">{{headData.siteName}}</div><div id="menu" *ngFor="let item of headData.menu, let i = index"><!-- 第一个参数为类名称，第二个参数为boolean值，如果为true就添加第一个参数的类--><ul [ngClass]="{'sumMenu': item.showSubMenu}"><!--mouseleave mouseout供选则--><li class="top_nav nav_1" (mouseenter)="showSubMenu(item ,i)" (mouseleave)="notShowSubMenu(item, i)"><span>{{item.menuName}}</span><dl *ngFor="let child of item.menuChildren, let k = index"[ngStyle]="{'display': item.showSubMenu ? 'block':'none','margin-left': '-2.6rem'}"><dd>{{child.menuChidrenItem}}</dd></dl></li></ul></div>
</div>

实际效果：

Angular二级导航栏相关推荐

Django横向二级导航栏（鼠标悬空事件）
1 <!DOCTYPE html> 2 <html lang="en" xmlns="http://www.w3.org/1999/html" ...
二级导航栏（html、css)
二级导航栏(html.css) 效果图: 完整代码如下: <!DOCTYPE html> <html lang="en"><head><m ...
【Web前端二级导航栏】
简单的Web前端二级导航栏示例: <!DOCTYPE html> <html><head><meta charset="utf-8"> ...
使用css实现二级导航栏
1.今日用css实现二级导航栏,在csdn上看了各种奶妈级的代码,终于倒腾出来了 2.话不多说,上效果图: 3.html代码如下: ```<!DOCTYPE HTML> <html ...
用css简单实现二级导航栏
display:none 可以隐藏元素 display:block 不仅可以让行内元素转变成块级元素还可以显示元素实例 CSS样式 <style>* {margin: 0;paddin ...
html二级导航栏随一级居中,html – 1.在css中链接不起作用2.如何垂直居中导航栏并在每个导航栏上添加填充...
我认为这就是你要找的 – > (查看后面的片段) >如果要移动A,D并在它们之间创建空格,最好的选择是使用flexBox属性. >链接A,D未正确显示,因为您使用位置:固定在li标签 ...
经典蓝色横向二级导航栏
[img]http://dl.iteye.com/upload/attachment/0068/2213/3e71ce48-0f17-3af9-aaed-275865688a36.jpg[/img]
Web前端二级导航栏设计
下面两个100行代码,注释详实易懂,主要靠gpt,这么说,是不是,只要某些游戏网站是开源的,我把网址给gpt,它也能给我找来,并在每一行注释,然后我各种搜资料,那么是不是可以几天速成制作精美而新潮的网 ...
HTML+CSS实现导航栏二级下拉菜单图书案例
一.效果图二.内容.要求学习完HTML5+CSS之后,可以考虑设计并实现一个导航栏菜单,对某个项目比如你的个人书籍按类别(硬件类.软件类.语言类.网络类等分法)进行分门别类,其中上面括号中的类别为 ...

Angular二级导航栏

Angular二级导航栏相关推荐

最新文章

热门文章