ng-sidebar (Angular 2) 实现问题 [英] ng-sidebar (Angular 2) implementation issue

问题描述

我需要使用 ng-sidebar 在单击标题中的按钮时在左侧显示一个可折叠的侧边栏菜单.

app.component.html

<ng-sidebar-container><ng-sidebar [(opened)]="_opened"><p>侧边栏内容</p></ng-sidebar><div ng-sidebar-content><button (click)="_toggleSidebar()">切换</button>
</ng-sidebar-container><form class="heading"><input type="text" name="search" [(ngModel)]="search"><input type="image" [src]="'../resource/searchicon.png'"></表单>

在 app.component.ts 中，

 private _opened: boolean = false;私人 _toggleSidebar() {this._opened = !this._opened;}

问题是，按钮根本没有反映在屏幕上，此外，没有任何反应.请帮忙解决这个问题.

解决方案

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

<ng-sidebar-container><ng-sidebar [(opened)]="_opened"><p>侧边栏内容</p></ng-sidebar><!-- 如果您的内容不可见，您也可以尝试在下方添加一个 div --><div style="clear:both;"></div></ng-sidebar-container><button (click)="_toggleSidebar()">切换</button><form class="heading"><input type="text" name="search" [(ngModel)]="search"><input type="image" [src]="'../resource/searchicon.png'"></表单>

请注意，我从 ng-sidebar-container 中取出了 <button (click)="_toggleSidebar()">Toggle</button>.如果侧边栏内容仍然不可见，请尝试在关闭 ng-sidebar-container<之前添加 <div style="clear:both;"></div>/code> 标签.

我创建了一个 plunker，它使用两种方法切换侧边栏:[(opened)]="_opened" 和 close() 和 open() 函数.它可以帮助您完成您的项目

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.

解决方案

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

这篇关于ng-sidebar (Angular 2) 实现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！