Angular實現(xiàn)二級導(dǎo)航欄

更新時間：2022年03月25日 14:24:48 作者：摩羯的成長期

這篇文章主要為大家詳細介紹了Angular實現(xiàn)二級導(dǎo)航欄，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Angular實現(xiàn)二級導(dǎo)航欄的具體代碼，供大家參考，具體內(nèi)容如下

1、將菜單放入數(shù)據(jù)庫：

模擬放到該路徑下：
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": "養(yǎng)生釣魚"
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? "itemId": "2",
? ? ? ? ? ? "menuChidrenItem": "野炊燒烤"
? ? ? ? ? },
? ? ? ? ? {
? ? ? ? ? ? "itemId": "3",
? ? ? ? ? ? "menuChidrenItem": "真人野戰(zhàn)"
? ? ? ? ? }
? ? ? ? ],
? ? ? ? "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接受數(shù)據(jù)，并處理：

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 {
? ? // 設(shè)置當(dāng)前子菜單顯示
? ? item.showSubMenu = true;
? }
? notShowSubMenu(item: any, index: any): void {
? ? // 設(shè)置當(dāng)前子菜單不顯示
? ? 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">
? <!-- 第一個參數(shù)為類名稱，第二個參數(shù)為boolean值，如果為true就添加第一個參數(shù)的類-->
? ? <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>

實際效果：