Togglemenu 在导航栏角 2 内关闭答案

【问题标题】：Togglemenu closed inside navbar angular 2Togglemenu 在导航栏角 2 内关闭
【发布时间】：2017-12-07 11:55:44
【问题描述】：

我正在使用 angular 2 创建一些侧边栏菜单。

这就是我现在所拥有的

app.component.html

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

<h1>
  {{title}}
</h1>

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

app.component.ts

import {Component, trigger, state, style, transition, animate} from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.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'))
    ]),
  ]
})
export class AppComponent {
  title = 'app works!';

  menuState:string = 'out';

  toggleMenu() {
    // 1-line if statement that toggles the value:
    this.menuState = this.menuState === 'out' ? 'in' : 'out';
  }
}

menu.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-menu',
    templateUrl: './menu.component.html',
    styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {

    constructor() { }

    ngOnInit() {
    }
}

menu.component.html

<button (click)="toggleMenu()" class="hamburger">
      <span>toggle menu</span>
    </button>
    <ul>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
    </ul>

这个我是切换右侧菜单，但我唯一的问题是在菜单组件 html 里面我也有切换不起作用，整个是从这个链接 https://blog.thecodecampus.de/angular-2-animate-creating-sliding-side-navigation

我需要关闭菜单组件内的菜单，知道该怎么做吗？？

【问题讨论】：

如果你想触发toggleMenu函数，那么你需要把它放在menu.component.ts里面
我试过没有任何反应
您还必须从 app.component.html 中删除按钮
否则，如果要向应用组件发送一些数据，则需要使用事件发射器
你能写出解决方案吗？

标签： javascript angular

【解决方案1】：

您可以从app-menu 组件发出事件。你需要在MenuComponent中创建一个EventEmitter：

import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'app-menu',
    templateUrl: './menu.component.html',
    styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
    @Output() onMenuToggle = new EventEmitter();

    constructor() { }

    ngOnInit() {
    }

    toggleMenu() {
      this.onMenuToggle.emit(null) //Emit an event here
    }
}

那么你需要在你的模板中使用发出的事件：

<app-menu [@slideInOut]="menuState" (onMenuToggle)="toggleMenu()"></app-menu>

【讨论】：