ng-sidebar (Angular 2) implementation issue

问题

I need to make use of ng-sidebar to display a collapsible sidebar menu to the left on click on button in 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>

And in app.component.ts ,

     private _opened: boolean = false;

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

The problem is, button doesn't reflect on screen at all and in addition, none happens. Please help sort this out.

回答1:

Try to change your HTML to something like:

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

please note, that I took <button (click)="_toggleSidebar()">Toggle</button> out of ng-sidebar-container. If you sidebar content still does not get visible, try to add <div style="clear:both;"></div> just before closing ng-sidebar-container tag.

I created a plunker which uses both methods for toggling sidebar: [(opened)]="_opened" and close() and open() functions. It may help you with your project

回答2:

Andriy solution was not working for Angular6 so adding my answer here.

As mention in the ReadME.md of official doc you need to mention the height element for the sidebar-container.

Given code works for me

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

in app.module.ts import sideBar as

imports: [
    SidebarModule.forRoot()
]

来源：https://stackoverflow.com/questions/45065156/ng-sidebar-angular-2-implementation-issue

标签

javascript

angular

angular-directive