Búsqueda de sitios web

typescript - Angular - Ocultar el menú lateral después de hacer clic en un elemento del menú

Creé un menú lateral, pero no puedo ocultar el menú después de hacer clic en un elemento del menú. Seguí el ejemplo de https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/

¿Necesito llamar a toggleMenu en el (click) de cada hipervínculo del HTML? Si es así, ¿cómo llamo a un método que está en app.component.ts desde otro componente?

Necesito ayuda por favor...

Estoy usando Angular 4 con Bootstrap 4.

Aquí está mi código: 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';
  }

ACTUALIZACIÓN :

Intenté llamar a toggleMenu(). Está funcionando, pero la página se está recargando de nuevo. Antes solía ser como una llamada AJAX (rápida), pero ahora es como si se cargara una nueva página por primera vez. Así que necesito ayuda sobre cómo hacerlo como se hace en 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-menu

navegación.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>

SOLUCIÓN:

Como mencionó Santosh, añadí el siguiente código en app.component.ts y funcionó como se esperaba. Gracias 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);
              }
          });
  }

Respuesta #1

Puedes manejar eso en los eventos del enrutador y establecer this.menuState a 'out' cada vez que la ruta cambie.

Un código de ejemplo bastante decente aquí

Artículos relacionados