Angular-单击菜单项后隐藏侧边栏菜单 [英] Angular - Hide sidebar menu after clicking a menu item

问题描述

我创建了侧边栏菜单，但是单击菜单项后无法隐藏菜单.我按照 https://blog.thecodecampus.de的示例进行操作/angular-2-animate-creating-sliding-side-navigation/

I created a sidebar menu, but I am not able to hide the menu after I click on a menu item. I followed the example from https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/

我是否需要从html的每个超链接上调用(单击)toggleMenu?如果是，如何从另一个组件调用app.component.ts中的方法?

Do I need to call toggleMenu on (click) of every hyper link from html? If yes, how do I call a method which is in app.component.ts from another component?

需要帮助...

我正在将Angular 4与bootstrap 4一起使用.

I am using Angular 4 with bootstrap 4.

这是我的代码: app.component.html:

Here is my 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:

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:

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';
  }

更新:

我试图调用toggleMenu().它正在工作，但是页面正在重新加载.以前它曾经像AJAX调用(快速)一样，但是现在它就像是第一次加载新页面一样.因此，我需要在 http://parlaybuddy.razartech.com/no-中完成此操作方面的帮助验证

I tried to call toggleMenu(). It is working, but the page is loading again. Earlier it used to be like AJAX call(quick), but now it is like a new page loads first time. So I need help on how to do it as it done in 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

navigation.component.ts

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>

解决方案:

正如Santosh提到的那样，我在app.component.ts中添加了以下代码，它按预期工作.谢谢桑托什

As Santosh metioned I added below code in app.component.ts and it worked as expected. Thank you 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);
              }
          });
  }

推荐答案

您可以在路由器事件中进行处理，并在路由更改时将this.menuState设置为'out'.

You can handle that in router events and set this.menuState to 'out' whenever route changes.

一个相当不错的示例代码此处

A pretty decent sample code here

这篇关于Angular-单击菜单项后隐藏侧边栏菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！