从Angular 4中的其他组件切换SideBar菜单

Question

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

  

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