Question

我正在使用角度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>

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

我需要的是关闭菜单组件内的菜单，任何想法如何做到？

Answer 1

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

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>

Togglemenu在navbar angular 2内部关闭

1 个答案: