ClarityNg: 如何在单击侧边栏内按钮时关闭侧边栏

Question

我有一个基础的angular模板，在侧边栏中有搜索功能。在移动设备上，当我点击侧边栏中的查找按钮时，侧边栏不会消失。我该如何使用angular关闭侧边栏？

- Sergey Slonimsky

---

你能分享一下你是如何创建模板的吗？ - Jeremy Wilken

是的，当然可以<clr-main-container> <clr-header> <div class="branding"> </div> <div class="header-nav" [clr-nav-level]="1"> </div> </clr-header> <div class="content-container"> <main class="content-area"> <router-outlet></router-outlet> </main> <nav class="sidenav" [clr-nav-level]="2"> <app-sidebar></app-sidebar> </nav> </div> </clr-main-container> - Sergey Slonimsky

Answer 1

最直接的解决方案是通过@ViewChild获取到侧边栏的NavLevelDirective实例，并调用它的close()方法。

例如，在模板中添加一个引用变量：

<nav #mySidenav class="sidenav" [clr-nav-level]="2">
    <app-sidebar></app-sidebar>
</nav>

然后通过以下方式在您的应用程序组件中访问它：

@ViewChild("mySidenav", {read: NavLevelDirective}) sidenav: NavLevelDirective;

当用户点击“查找”按钮时，只需调用sidenav.close()即可。

- Eudes