从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

您可以使用共享服务打开侧边栏.EventEmitter当您想要打开侧边栏时,创建服务vith 并发出事件.然后,在侧边栏组件中,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
});