如何在我的 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>
最佳答案
您可以使用共享服务打开侧边栏。使用 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
});
关于angular - 从 Angular 4 中的其他组件切换侧边栏菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46210004/