从Angular 4中的其他组件切换侧边栏菜单

Question

如何在我的 Angular 应用中实现侧边栏切换菜单。我对如何在另一个组件中调用侧边栏菜单感到困惑。我的切换按钮位于标题组件上。它的目的是当我单击标题组件上的切换按钮时显示侧边栏菜单。

header.component.html

  <div class="navbar-header"><a id="toggle-btn" href="#" class="menu-btn"><i class="icon-bars"> </i></a><a href="index.html" class="navbar-brand">
              <div class="brand-text"><span>MCDONALDS</span></div></a></div>

sidebar.component.html

<nav class="side">
  <h1>CLICK TO Show Me</h1>
  </nav>

core.component.html

<app-header></app-header>
<app-sidebar></app-sidebar>

Answer 1

您可以使用共享服务打开侧边栏。创建一个服务 vith EventEmitter 并在您想要打开侧边栏时发出一个事件。然后，在侧边栏组件中，订阅 EventEmitter 并在每次触发事件时打开/关闭侧边栏。

例如：

服务

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class CoreService {
  public toggleSidebar: EventEmitter<any> = new EventEmitter();
}

标题

public openSidebar() {
  this.coreService.toggleSidebar.emit();
}

侧边栏

this.coreService.toggleSidebar.subscribe(() => {
  //open your sidebar by setting classes, whatever
});