我想在 Angular 6 中切换菜单
I want to toggle menu in Angular 6
我想切换侧边导航栏 -
- Taken a boolen value toggle_menu to true
- and I am calling a function togg() on button click in the menu bar
which sets the boolean value false anf hence div is toggled
但问题是
有 4 个按钮,每个按钮都有自己的 div 容器,每个按钮在点击时调用函数 togg()
这导致所有 div 同时打开。
但我想为每个按钮点击打开每个 div
代码:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
toggle_menu: boolean = true;
constructor() { }
togg() {
return this.toggle_menu = !this.toggle_menu;
}
}
html代码:
<button class="dropdown-btn" (click)="togg();"> Besics</button>
<div *ngIf="!toggle_menu">
<a routerLink="/imp-style"> Implimenting Style </a>
</div>
<button class="dropdown-btn" (click)="togg();">Image</button>
<div *ngIf="!toggle_menu">
<a routerLink="/slider"> Image Slider</a>
</div>
<button class="dropdown-btn" (click)="togg();">Forms</button>
<div *ngIf="!toggle_menu">
<a routerLink="/signup"> Signup </a>
<a routerLink="/signup"> Login </a>
<a routerLink="/signup"> Register </a>
</div>
<button class="dropdown-btn" (click)="togg();">Service</button>
<div *ngIf="!toggle_menu">
<a routerLink="/dipika-task"> Data Display </a>
<a routerLink="/social-media"> Social Media </a>
<a routerLink="/student"> Student </a>
</div>
现在,您所有的 4 个按钮都有一个 div 内部,它取决于您的 .ts 代码中的相同布尔值。
如果您希望它们彼此独立切换并且每个按钮切换其自己的滑块,您需要在 .ts 代码中包含 4 个不同的布尔值。
这是一个例子:
<button class="dropdown-btn" (click)="togg();"> Besics</button>
<div *ngIf="!toggle_menu1">
<a routerLink="/imp-style"> Implimenting Style </a>
</div>
<button class="dropdown-btn" (click)="togg();">Image</button>
<div *ngIf="!toggle_menu2">
<a routerLink="/slider"> Image Slider</a>
</div>
<button class="dropdown-btn" (click)="togg();">Forms</button>
<div *ngIf="!toggle_menu3">
<a routerLink="/signup"> Signup </a>
<a routerLink="/signup"> Login </a>
<a routerLink="/signup"> Register </a>
</div>
<button class="dropdown-btn" (click)="togg();">Service</button>
<div *ngIf="!toggle_menu4">
<a routerLink="/dipika-task"> Data Display </a>
<a routerLink="/social-media"> Social Media </a>
<a routerLink="/student"> Student </a>
</div>
export class AppComponent{
dropdowns = {
"besics": false,
"images": false,
"forms": false,
"service": false,
}
constructor() { }
togg(string name) {
dropwdowns[name] = !dropwdowns[name];
}
并在您的 html 中使用 *ngIf
<button class="dropdown-btn" (click)="togg('besics');"> Besics</button>
<div *ngIf="dropdowns['besics']">
<a routerLink="/imp-style"> Implimenting Style </a>
</div>
<button class="dropdown-btn" (click)="togg('image');">Image</button>
<div *ngIf="dropdowns['image']">
<a routerLink="/slider"> Image Slider</a>
</div>
<button class="dropdown-btn" (click)="togg('forms');">Forms</button>
<div *ngIf="dropdowns['forms']">
<a routerLink="/signup"> Signup </a>
....
</div>
<button class="dropdown-btn" (click)="togg('service');">Service</button>
<div *ngIf="dropdowns['service']">
<a routerLink="/dipika-task"> Data Display </a>
....
</div>
您需要为每个按钮维护不同的标志才能使其正常工作..
<button class="dropdown-btn" (click)="Besicstogg();"> Besics</button>
<div *ngIf="!Besicstoggle_menu">
<a routerLink="/imp-style"> Implimenting Style </a>
</div>
<button class="dropdown-btn" (click)="Imagetogg();">Image</button>
<div *ngIf="!Imagetoggle_menu">
<a routerLink="/slider"> Image Slider</a>
</div>
<button class="dropdown-btn" (click)="Formstogg();">Forms</button>
<div *ngIf="!Formstoggle_menu">
<a routerLink="/signup"> Signup </a>
<a routerLink="/signup"> Login </a>
<a routerLink="/signup"> Register </a>
</div>
<button class="dropdown-btn" (click)="Servicetogg();">Service</button>
<div *ngIf="!Servicetoggle_menu">
<a routerLink="/dipika-task"> Data Display </a>
<a routerLink="/social-media"> Social Media </a>
<a routerLink="/student"> Student </a>
</div>
并在 ts 文件中
Servicetogg() {
return this.Servicetoggle_menu = !this.Servicetoggle_menu;
}
Besicstogg() {
return this.Besicstoggle_menu = !this.Besicstoggle_menu;
}
Imagetogg() {
return this.Imagetoggle_menu = !this.Imagetoggle_menu;
}
Formstogg() {
return this.Formstoggle_menu = !this.Formstoggle_menu;
}
Servicetogg() {
return this.Servicetoggle_menu = !this.Servicetoggle_menu;
}
你如何进一步简化它并摆脱冗余:
export interface MenuItem {
title: string;
links: { title: string, link: string }[]
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
menuItems: MenuItem [] = [
{
title: 'Basics' ,
links: {
title: 'Implementing Style',
link: '/imp-style'
}
},
// ... put the rest here
];
activeMenu?: MenuItem;
toggle(menu: MenuItem): void {
this.activeMenu = this.activeMenu === menu ? void 0 : menu;
}
isActive(menu: MenuItem): boolean {
return this.activeMenu === menu;
}
}
模板
<ng-container *ngFor="let menu of menuItems">
<button class="dropdown-btn" (click)="toggle(menu)">{{menu.title}}</button>
<div *ngIf="isActive(menu)">
<a *ngFor="let link of menu.links" [routerLink]="link.link">{{link.title}}</a>
</div>
</ng-container>
如果您希望同时打开更多菜单:
activeMenus: MenuItem[] = [];
toggle(menu: MenuItem): void {
if (this.isActive(menu)) {
this.activeMenus.splice(this.activeMenus.indexOf(menu), 1);
} else {
this.activeMenu.push(menu);
}
}
isActive(menu: MenuItem): boolean {
return this.activeMenus.includes(menu);
}
您只需在 (click)
函数中传递菜单名称并存储在变量中即可。
<li class="list-group-item" (click)="toggleMenu('menu')">
<a href="javascript:void(0)" >Menu</a>
</li>
并在控制器中使用以下代码:
toggleMenu(menu: string): void{
if(this.toggle == true && this.subsetting!='' && this.subsetting!=menu)
this.toggle = false;
this.subsetting = menu;
this.toggle = !this.toggle;
}
但首先在class
中声明变量
toggle:boolean = false;
subsetting:string ='';
我想切换侧边导航栏 -
- Taken a boolen value toggle_menu to true
- and I am calling a function togg() on button click in the menu bar which sets the boolean value false anf hence div is toggled
但问题是
有 4 个按钮,每个按钮都有自己的 div 容器,每个按钮在点击时调用函数 togg()
这导致所有 div 同时打开。
但我想为每个按钮点击打开每个 div
代码:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
toggle_menu: boolean = true;
constructor() { }
togg() {
return this.toggle_menu = !this.toggle_menu;
}
}
html代码:
<button class="dropdown-btn" (click)="togg();"> Besics</button>
<div *ngIf="!toggle_menu">
<a routerLink="/imp-style"> Implimenting Style </a>
</div>
<button class="dropdown-btn" (click)="togg();">Image</button>
<div *ngIf="!toggle_menu">
<a routerLink="/slider"> Image Slider</a>
</div>
<button class="dropdown-btn" (click)="togg();">Forms</button>
<div *ngIf="!toggle_menu">
<a routerLink="/signup"> Signup </a>
<a routerLink="/signup"> Login </a>
<a routerLink="/signup"> Register </a>
</div>
<button class="dropdown-btn" (click)="togg();">Service</button>
<div *ngIf="!toggle_menu">
<a routerLink="/dipika-task"> Data Display </a>
<a routerLink="/social-media"> Social Media </a>
<a routerLink="/student"> Student </a>
</div>
现在,您所有的 4 个按钮都有一个 div 内部,它取决于您的 .ts 代码中的相同布尔值。
如果您希望它们彼此独立切换并且每个按钮切换其自己的滑块,您需要在 .ts 代码中包含 4 个不同的布尔值。
这是一个例子:
<button class="dropdown-btn" (click)="togg();"> Besics</button>
<div *ngIf="!toggle_menu1">
<a routerLink="/imp-style"> Implimenting Style </a>
</div>
<button class="dropdown-btn" (click)="togg();">Image</button>
<div *ngIf="!toggle_menu2">
<a routerLink="/slider"> Image Slider</a>
</div>
<button class="dropdown-btn" (click)="togg();">Forms</button>
<div *ngIf="!toggle_menu3">
<a routerLink="/signup"> Signup </a>
<a routerLink="/signup"> Login </a>
<a routerLink="/signup"> Register </a>
</div>
<button class="dropdown-btn" (click)="togg();">Service</button>
<div *ngIf="!toggle_menu4">
<a routerLink="/dipika-task"> Data Display </a>
<a routerLink="/social-media"> Social Media </a>
<a routerLink="/student"> Student </a>
</div>
export class AppComponent{
dropdowns = {
"besics": false,
"images": false,
"forms": false,
"service": false,
}
constructor() { }
togg(string name) {
dropwdowns[name] = !dropwdowns[name];
}
并在您的 html 中使用 *ngIf
<button class="dropdown-btn" (click)="togg('besics');"> Besics</button>
<div *ngIf="dropdowns['besics']">
<a routerLink="/imp-style"> Implimenting Style </a>
</div>
<button class="dropdown-btn" (click)="togg('image');">Image</button>
<div *ngIf="dropdowns['image']">
<a routerLink="/slider"> Image Slider</a>
</div>
<button class="dropdown-btn" (click)="togg('forms');">Forms</button>
<div *ngIf="dropdowns['forms']">
<a routerLink="/signup"> Signup </a>
....
</div>
<button class="dropdown-btn" (click)="togg('service');">Service</button>
<div *ngIf="dropdowns['service']">
<a routerLink="/dipika-task"> Data Display </a>
....
</div>
您需要为每个按钮维护不同的标志才能使其正常工作..
<button class="dropdown-btn" (click)="Besicstogg();"> Besics</button>
<div *ngIf="!Besicstoggle_menu">
<a routerLink="/imp-style"> Implimenting Style </a>
</div>
<button class="dropdown-btn" (click)="Imagetogg();">Image</button>
<div *ngIf="!Imagetoggle_menu">
<a routerLink="/slider"> Image Slider</a>
</div>
<button class="dropdown-btn" (click)="Formstogg();">Forms</button>
<div *ngIf="!Formstoggle_menu">
<a routerLink="/signup"> Signup </a>
<a routerLink="/signup"> Login </a>
<a routerLink="/signup"> Register </a>
</div>
<button class="dropdown-btn" (click)="Servicetogg();">Service</button>
<div *ngIf="!Servicetoggle_menu">
<a routerLink="/dipika-task"> Data Display </a>
<a routerLink="/social-media"> Social Media </a>
<a routerLink="/student"> Student </a>
</div>
并在 ts 文件中
Servicetogg() {
return this.Servicetoggle_menu = !this.Servicetoggle_menu;
}
Besicstogg() {
return this.Besicstoggle_menu = !this.Besicstoggle_menu;
}
Imagetogg() {
return this.Imagetoggle_menu = !this.Imagetoggle_menu;
}
Formstogg() {
return this.Formstoggle_menu = !this.Formstoggle_menu;
}
Servicetogg() {
return this.Servicetoggle_menu = !this.Servicetoggle_menu;
}
你如何进一步简化它并摆脱冗余:
export interface MenuItem {
title: string;
links: { title: string, link: string }[]
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
menuItems: MenuItem [] = [
{
title: 'Basics' ,
links: {
title: 'Implementing Style',
link: '/imp-style'
}
},
// ... put the rest here
];
activeMenu?: MenuItem;
toggle(menu: MenuItem): void {
this.activeMenu = this.activeMenu === menu ? void 0 : menu;
}
isActive(menu: MenuItem): boolean {
return this.activeMenu === menu;
}
}
模板
<ng-container *ngFor="let menu of menuItems">
<button class="dropdown-btn" (click)="toggle(menu)">{{menu.title}}</button>
<div *ngIf="isActive(menu)">
<a *ngFor="let link of menu.links" [routerLink]="link.link">{{link.title}}</a>
</div>
</ng-container>
如果您希望同时打开更多菜单:
activeMenus: MenuItem[] = [];
toggle(menu: MenuItem): void {
if (this.isActive(menu)) {
this.activeMenus.splice(this.activeMenus.indexOf(menu), 1);
} else {
this.activeMenu.push(menu);
}
}
isActive(menu: MenuItem): boolean {
return this.activeMenus.includes(menu);
}
您只需在 (click)
函数中传递菜单名称并存储在变量中即可。
<li class="list-group-item" (click)="toggleMenu('menu')">
<a href="javascript:void(0)" >Menu</a>
</li>
并在控制器中使用以下代码:
toggleMenu(menu: string): void{
if(this.toggle == true && this.subsetting!='' && this.subsetting!=menu)
this.toggle = false;
this.subsetting = menu;
this.toggle = !this.toggle;
}
但首先在class
中声明变量toggle:boolean = false;
subsetting:string ='';