web-dev-qa-db-fra.com

Angular - Masquer le menu de la barre latérale après avoir cliqué sur un élément de menu

J'ai créé un menu dans la barre latérale, mais je ne parviens pas à masquer le menu après avoir cliqué sur un élément de menu. J'ai suivi l'exemple de https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/

Dois-je appeler toggleMenu sur (cliquer) de chaque hyperlien à partir de HTML? Si oui, comment appeler une méthode se trouvant dans app.component.ts à partir d'un autre composant?

Besoin d'aide s'il vous plaît ...

J'utilise Angular 4 avec bootstrap 4.

Voici mon code: app.component.html:

<button (click)="toggleMenu()" class="hamburger">
  <span>toggle menu</span>
</button>

<!--  <app-menu [@slideInOut]="menuState"></app-menu>  -->
<navigation-component [@slideInOut]="menuState"> </navigation-component>

<div class="container-fluid">
  <alert></alert>
  <router-outlet></router-outlet>
</div>

navigation.component.mobile.html:

    <li><a routerLink="/home" routerLinkActive="active"> Home</a></li>
    <li>
        <a href="#submenu1" data-toggle="collapse">Alert</a>
        <ul id="submenu1" class="list-unstyled collapse">
            <li><a routerLink="/linesidemonitor" data-toggle="collapse" data-target=".navbar-collapse.show">IQS Alert</a></li>
        </ul>
    </li>
    <li routerLinkActive="active" [hidden]="!authenticated()">
        <a href="#submenu2" data-toggle="collapse">Configuration</a>
        <ul id="submenu2" class="list-unstyled collapse">
            <li><a routerLink="/contact" data-toggle="collapse" data-target=".navbar-collapse.show">Contacts</a></li>
            <li><a routerLink="/department" data-toggle="collapse" data-target=".navbar-collapse.show">Departments</a></li>
            <li><a routerLink="/notificationlevel">NotificationLevels</a></li>
            <li><a routerLink="/recipient">Recipients</a></li>
        </ul>
    </li>

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: './'  + (window.innerWidth > 745 ? 
          'app.component.html' :
          'app.component.mobile.html'),
  styleUrls: ['./app.component.css'],
  animations: [
               trigger('slideInOut', [
                 state('in', style({
                   transform: 'translate3d(0, 0, 0)'
                 })),
                 state('out', style({
                   transform: 'translate3d(100%, 0, 0)'
                 })),
                 transition('in => out', animate('400ms ease-in-out')),
                 transition('out => in', animate('400ms ease-in-out'))
               ]),
             ]
})
  toggleMenu() {
      // 1-line if statement that toggles the value:
      this.menuState = this.menuState === 'out' ? 'in' : 'out';
  }

enter image description here

MISE À JOUR:

J'ai essayé d'appeler toggleMenu (). Cela fonctionne, mais la page se recharge à nouveau. Auparavant, cela ressemblait à AJAX call (rapide), mais maintenant, c'est comme si une nouvelle page se chargeait pour la première fois. J'ai donc besoin d'aide pour savoir comment procéder comme suit http://parlaybuddy.razartech.com/no-auth

https://jmouriz.github.io/angular-material-multilevel-menu/demo/demo.html#!/demo/views/item-1-1

https://stackblitz.com/edit/dynamic-nested-sidenav-men

navigation.component.ts

toggleMenu() {
    this.toggleMenu();
}

HTML:

       <ul id="submenu2" class="list-unstyled collapse">
            <li><a class="submenu" routerLink="/contact"  (click)="toggleMenu()">Contacts</a></li>
            <li><a class="submenu" routerLink="/department" (click)="toggleMenu()">Departments</a></li>

SOLUTION:

Comme Santosh l'a dit, j'ai ajouté le code ci-dessous dans app.component.ts et cela a fonctionné comme prévu. Merci Santosh

  constructor(private http: Http,
          private router: Router,
          public zone: NgZone) {
          router.events.subscribe( (event: Event) => {
              if (event instanceof NavigationStart) {
                  this.menuState = 'out';
              }

              if (event instanceof NavigationEnd) {
                  // Hide loading indicator
              }

              if (event instanceof NavigationError) {
                  // Hide loading indicator
                  // Present error to user
                  console.log(event.error);
              }
          });
  }
angulartypescriptbootstrap-4
10
SK.

Vous pouvez gérer cela dans les événements de routeur et définir this.menuState à 'out' chaque fois que la route change.

Un exemple de code assez correct ici

7
Santhosh S

Vous devez faire basculer les choses dans NgZone. Et pour cela, vous devez d'abord ajouter le module suivant.

import { NgZone } from '@angular/core';

Maintenant, créez une variable de zone dans le constructeur

constructor(public zone: NgZone){}

et écrivez votre logique de bascule dans la méthode Zone() comme suit

toggleMenu() {
    this.zone.run(()=>{
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
   })
}
1
Chintan Kukadiya

Le composant de navigation n'est-il pas un composant enfant du composant d'application? Serait bien d'avoir le code complet de navigation.component.ts. Comment l'état du menu du composant de navigation est-il envoyé à son parent? Comme je ne suis pas sûr de ce qui se passe, j'ai mis un exemple de code dans slackblitz

https://stackblitz.com/edit/animations-in-angular4-2qwdt7?file=app%2Fnavigation.component.ts

0
Krishnanunni Jeevan

La navigation sur chaque événement de routeur serait plus lente que les solutions qui ne s'exécutent qu'en cas de besoin. (Il sera exécuté chaque fois que vous changerez de route par des liens ou des appels.)

La solution peut être comme ici pour écouter l'événement click et changer d'état ensuite.

0
androbin