Question

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

我拥有的是：

app.component.html，nav.component.html

＆＃13;

<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>

＆＃13;

Myservice.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中）？任何帮助都会非常明显。我是棱角分明的新人。

Answer 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>

希望这会有所帮助...

Answer 2

为此，

您可以使CommonService存储菜单状态，或使用该服务切换菜单。
如果您在组件之间有父子关系，也可以使用@Input @Output。

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

Answer 3

您可以创建一个服务，最好在里面创建一个静态变量来获取和设置菜单的可见性状态。通过这种方式，您可以使用ComponentName.variableName直接设置和获取变量。

使用您可以使用的可见性（对不起，如果有任何语法错误） 1 GT;设置document.getelementbyid（＆＃34; idofelement＆＃34;）。display = none或block 2＆gt;使用* ngIf =＆＃34; someboolean＆＃34;你应该在你的ts文件中设置布尔值

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

3 个答案: