如何在angular2中显示和隐藏侧边菜单答案

【问题标题】：How to show and hide side menu in angular2如何在angular2中显示和隐藏侧边菜单
【发布时间】：2017-03-30 19:40:59
【问题描述】：

在我的应用程序中，我必须实现隐藏和显示侧边菜单。默认情况下，页面菜单在单击切换菜单时打开，我必须隐藏侧面菜单。我该如何实现。

我拥有的是：

app.component.html, nav.component.html

<div class="menu-toggler sidebar-toggler">
          <span></span>
    </div>



    <ul>
     <li class="nav-item  ">
      <a class="nav-link nav-toggle">
        <i class="icon-diamond"></i>
        <span class="title">Name</span>
        <span class="arrow"></span>
      </a>
     </li>
    </ul>

我的服务.ts

export class GlobalService {
public collapse;

constructor() { }

setValue(val: boolean) {
    this.collapse = val;
}

getValue() {
    return this.collapse;
}

编辑

app.component.html

<div *ngIf="!toggle()"class="menu-toggler sidebar-toggler">
      <span></span>
</div>

app.component.ts

import { GlobalService } from "path";

export class AppComponent {
toggle() {
this.globalService.setValue(false);

 }
}

如何在单击菜单切换 (app.compnent.html) 时隐藏此列表（在 nav.html 中）？任何帮助都会非常显着。我是 Angular 新手。

【问题讨论】：

我按照你们的建议创建了一个全球服务。但是我对如何隐藏侧边栏感到困惑。这里包括我的全局服务和编辑的文件。

标签： javascript html css angular

【解决方案1】：

如果使用服务不是优先级，那么您可以简单地维护简单的变量来完成这项任务。

你的 app.component.ts



    export class AppComponent {
      showMenu : boolean = true;
    }

你的 app.component.html

<div (click)="showMenu = !showMenu" class="menu-toggler sidebar-toggler"><span></span>
</div>
<ul *ngIf="showMenu">
    <!-- used showMenu to hide/show -->
    <li class="nav-item  ">
        <a class="nav-link nav-toggle">
            <i class="icon-diamond"></i>
            <span class="title">Name</span>
            <span class="arrow"></span>
        </a>
    </li>
</ul>

希望这会有所帮助...

【讨论】：

listing部分（即
）不在app.component.html中。它在 nav.component.html 中。
所以将 (*ngIf="showMenu" ) 添加到页面中的该组件选择器中。假设您的导航组件具有选择器行“ ”，那么您可以拥有

【解决方案2】：

为此，

您可以创建一个 CommonService 来存储菜单的状态，或者使用该服务来切换您的菜单。
您还可以使用 @Input @Output ，以防组件之间存在父子关系。

方法将取决于您的项目/文件结构。

【讨论】：

【解决方案3】：

您可以创建一个服务，最好在其中创建一个静态变量来获取和设置菜单的可见性状态。这样你就可以直接使用 ComponentName.variableName 来设置和获取变量。

发挥您可以使用的可见性（如果有任何语法错误，请见谅） 1> 设置document.getelementbyid("idofelement").display=none或block 2>使用 *ngIf="someboolean" 你应该在你的 ts 文件中设置布尔值

【讨论】：