Angular如何實(shí)現(xiàn)二級(jí)導(dǎo)航欄

這篇文章主要介紹了Angular如何實(shí)現(xiàn)二級(jí)導(dǎo)航欄，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內(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": "野外運(yùn)動(dòng)"
          },
          {
            "itemId": "3",
            "menuChidrenItem": "健身小知識(shí)"
          }
        ],
        "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":"個(gè)人中心",
        "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">
  <!-- 第一個(gè)參數(shù)為類名稱，第二個(gè)參數(shù)為boolean值，如果為true就添加第一個(gè)參數(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>

實(shí)際效果：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Angular如何實(shí)現(xiàn)二級(jí)導(dǎo)航欄”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!