Javascript ng侧栏（角度2）实施问题

我需要利用ng边栏在标题中点击按钮的左侧显示一个可折叠的边栏菜单

app.component.html

<div class="page-header custom-phead">
    <ng-sidebar-container>
     <ng-sidebar [(opened)]="_opened">
        <p>Sidebar contents</p>
      </ng-sidebar>

<div ng-sidebar-content>
<button (click)="_toggleSidebar()">Toggle</button>
</div>
</ng-sidebar-container>
<form class="heading">
<input type="text" name="search" [(ngModel)]="search"><input type="image" [src]="'../resource/searchicon.png'">
</form>
</div>

<div>
    <ng-sidebar-container style=" height: 100vh">
    <ng-sidebar [(opened)]="_opened" mode="push" autoCollapseWidth=100>

      <p>Sidebar contents</p>
      <p>Sidebar contents</p>
      <p>Sidebar contents</p>
      <p>Sidebar contents</p>
      <p>Sidebar contents</p>

    </ng-sidebar>

    <!-- Page content -->
    <div ng-sidebar-content>
      <button (click)="_toggleSidebar()">Toggle sidebar</button>
    </div>

  </ng-sidebar-container>    
</div>

---

问题是，按钮根本不会在屏幕上反射，而且，不会发生任何情况。请帮助解决此问题。

尝试将HTML更改为以下内容：

<div class="page-header custom-phead">
  <ng-sidebar-container>
    <ng-sidebar [(opened)]="_opened">
      <p>Sidebar contents</p>
    </ng-sidebar>
    <!-- you can also try to add a div below if your content not visible -->
    <div style="clear:both;"></div>
  </ng-sidebar-container>

  <button (click)="_toggleSidebar()">Toggle</button>

  <form class="heading">
    <input type="text" name="search" [(ngModel)]="search">
    <input type="image" [src]="'../resource/searchicon.png'">
  </form>
</div>

边栏内容

切换

请注意，我从

ng侧边栏容器中取出了
Toggle
。如果侧栏内容仍然不可见，请尝试在关闭
ng侧栏容器之前添加

我创建了一个使用这两种方法切换边栏的工具：
[（opened）]=“\u opened”
和
close（）
和
open（）
函数。这可能对你的项目有帮助
安德烈的解决方案不适用于Angular6，所以在这里添加我的答案

正如官方文档中提到的，您需要提到侧边栏容器的高度元素

给定的代码对我有用

app.component.html

<div class="page-header custom-phead">
    <ng-sidebar-container>
     <ng-sidebar [(opened)]="_opened">
        <p>Sidebar contents</p>
      </ng-sidebar>

<div ng-sidebar-content>
<button (click)="_toggleSidebar()">Toggle</button>
</div>
</ng-sidebar-container>
<form class="heading">
<input type="text" name="search" [(ngModel)]="search"><input type="image" [src]="'../resource/searchicon.png'">
</form>
</div>

<div>
    <ng-sidebar-container style=" height: 100vh">
    <ng-sidebar [(opened)]="_opened" mode="push" autoCollapseWidth=100>

      <p>Sidebar contents</p>
      <p>Sidebar contents</p>
      <p>Sidebar contents</p>
      <p>Sidebar contents</p>
      <p>Sidebar contents</p>

    </ng-sidebar>

    <!-- Page content -->
    <div ng-sidebar-content>
      <button (click)="_toggleSidebar()">Toggle sidebar</button>
    </div>

  </ng-sidebar-container>    
</div>

在app.module.ts中将侧栏作为导入

imports: [
    SidebarModule.forRoot()
]

提供您的
app.module.ts
。你在那里导入了
SidebarModule
吗？是的，我已经导入了。我最初甚至尝试了.close（）和.open（）。问题是，我在单击时没有看到任何活动。ng sidebar的内容从未显示。但是在.ts中，函数会在点击按钮时被触发，返回true和false。请您共享plunker，以便我可以验证是否遗漏了任何内容？抱歉，完全忘记共享plunker链接：，我也更新了我的原始答案（添加了plunker链接），作为替代，你也可以考虑使用材料设计工具条边栏在所有漂亮的答案上都没有反应，它帮助我解决了我的问题。非常感谢。