ng-sidebar (Angular 2) 执行问题

Question

我需要利用 ng-sidebar 在单击 header 中的按钮时在左侧显示可折叠的侧边栏菜单。

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>

并且在 app.component.ts 中，

     private _opened: boolean = false;

  private _toggleSidebar() {
    this._opened = !this._opened;
  }

问题是，按钮根本没有反映在屏幕上，此外，none 发生了。请帮助解决这个问题。

Answer 1

尝试将您的 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-sidebar-container 中取出 <button (click)="_toggleSidebar()">Toggle</button>。如果侧边栏内容仍然不可见，请尝试在关闭 ng-sidebar-container 标签之前添加 <div style="clear:both;"></div>。

我创建了一个 plunker，它使用两种方法来切换边栏：[(opened)]="_opened" 和 close() 以及 open() 函数。它可能对您的项目有所帮助

Answer 2

Andriy 解决方案不适用于 Angular6，因此请在此处添加我的答案。

如官方文档 ReadME.md 中所述，您需要提及侧边栏容器的高度元素。

给定的代码适合我

app.component.html

<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.component.ts

public _opened: boolean = false;

public _toggleSidebar() {
this._opened = !this._opened;
}

在 app.module.ts 中将边栏导入为

imports: [
    SidebarModule.forRoot()
]

ng-sidebar (Angular 2) 执行问题

ng-sidebar (Angular 2) implementation issue

javascript

angular-directive

angular