How to realize the second-level Navigation Bar by Angular

This article mainly introduces Angular how to achieve the secondary navigation bar, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

The details are as follows

1. Put the menu in the database:

Put the simulation under this path:

Src/assets/json/header.json

{"siteName": "PGG Entertainment and Fitness Center", "menu": [{"id": "1", "menuName": "Home", "menuChildren": [{}], "showSubMenu": false}, {"id": "2", "menuName": "Fitness Center" "menuChildren": [{"itemId": "1", "menuChidrenItem": "living room equipment fitness"}, {"itemId": "2", "menuChidrenItem": "field sports"}, {"itemId": "3" "menuChidrenItem": "fitness knowledge"}], "showSubMenu": false}, {"id": "3", "menuName": "leisure and entertainment", "menuChildren": [{"itemId": "1", "menuChidrenItem": "health fishing"} {"itemId": "2", "menuChidrenItem": "picnic barbecue"}, {"itemId": "3", "menuChidrenItem": "Live Field"}], "showSubMenu": false}, {"id": "4" "menuName": "order Center", "menuChildren": [{"itemId": "1", "menuChidrenItem": "all orders"}, {"itemId": "2", "menuChidrenItem": "completed orders"} {"itemId": "3", "menuChidrenItem": "outstanding order"}], "showSubMenu": false}, {"id": "5", "menuName": "personal Center", "menuChildren": [{"itemId": "1" "menuChidrenItem": "user information modification"}], "showSubMenu": false}]}

Ts accepts the data and processes:

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 can access this.http.get ('/ assets/json/header.json') .subscribe (data = > {this.headData = data; console.log (this.headData.menu);}) } showSubMenu (item: any, index: any): void {/ / set the current submenu to display item.showSubMenu = true;} notShowSubMenu (item: any, index: any): void {/ / set the current submenu not to display item.showSubMenu = false;}}

Html display control, using ngstyle control:

{{headData.siteName}} {{item.menuName}} {{child.menuChidrenItem}}

Actual effect:

Thank you for reading this article carefully. I hope the article "how to achieve the second-level navigation bar of Angular" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!