Question

我创建了侧边栏菜单，但是单击菜单项后无法隐藏菜单。我遵循了https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation/

中的示例

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

需要帮助...

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

这是我的代码： 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';
  }

更新：

我试图调用toggleMenu（）。它正在工作，但是页面再次加载。以前它曾经像AJAX调用（快速）一样，但是现在它就像是第一次加载新页面一样。因此，我需要如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

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中添加了以下代码，它按预期工作。谢谢桑托什

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

Answer 1

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

相当不错的示例代码here

Answer 2

您必须在NgZone中执行切换操作。首先，您必须添加以下模块。

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

现在在构造函数中创建区域变量

constructor(public zone: NgZone){}

并使用Zone()方法编写切换逻辑，如下所示：

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

Answer 3

导航组件不是应用程序组件的子组件。拥有navigation.component.ts的完整代码将非常高兴。导航组件的菜单状态如何发送到其父组件？由于不确定发生了什么，我将示例代码放到了slackblitz中

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

Answer 4

与每个仅在需要时运行的解决方案相比，在每个路由器事件上的导航速度都要慢。（当您通过任何链接或呼叫更改路线时，它将每次运行。）

解决方案可以是just like here，以监听点击事件并随后更改状态。

Answer 5

我更新了下面提到的链接的答案。在子菜单上单击以切换导航栏

答案更新 https://stackoverflow.com/a/58995299/714707

Angular-单击菜单项后隐藏侧边栏菜单

5 个答案: