Я хочу переключить боковую панель навигации для этого я -

  1. Переведите меню переключения логического значения в true
  2. и я вызываю функцию togg () при нажатии кнопки в строке меню, которая устанавливает логическое значение false и, следовательно, div переключается

Но проблема в Есть 4 кнопки, каждая кнопка имеет свой собственный контейнер div, каждая кнопка вызывает функцию при нажатии togg()

В результате все div открывается одновременно.

Но я хочу открывать каждый div для каждого нажатия кнопки

TS-код:

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>
2
Anurag Ranjan 21 Авг 2018 в 16:13

5 ответов

Лучший ответ
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>
1
Augustin R 21 Авг 2018 в 14:10

Вам нужно поддерживать разные флаги для каждой кнопки, чтобы эта работа работала.

<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;
  }
0
Krishna 21 Авг 2018 в 13:25

Вы можете сделать это, просто передав имя меню в функцию (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;
}

Но сначала объявите переменную в классе

toggle:boolean = false;
subsetting:string ='';
-1
barbsan 6 Сен 2019 в 09:39

Прямо сейчас все ваши 4 кнопки имеют внутри div, который зависит от того же логического значения из вашего .ts кода.

Если вы хотите, чтобы они переключались независимо друг от друга и чтобы каждая кнопка переключала свой собственный ползунок, вам потребуется 4 различных логических значения в вашем .ts-коде.

Вот пример:

<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>
0
default 21 Авг 2018 в 13:30

Как насчет того, чтобы упростить его еще больше и избавиться от избыточности:

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);
}
1
Poul Kruijt 21 Авг 2018 в 13:37
51949530