ng-sidebar(Angular 2)实现问题 [英] ng-sidebar (Angular 2) implementation issue
问题描述
我需要使用ng-sidebar在标题中单击按钮左侧显示可折叠的侧边栏菜单。
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
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中,
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.
推荐答案
尝试将您的HTML更改为:
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>
请注意,我带< button(click)=_ toggleSidebar ()>切换< / button>
超出 ng-sidebar-container
。如果侧边栏内容仍然无法显示,请尝试在关闭<$ c之前添加< div style =clear:both;>< / div>
$ c> ng-sidebar-container tag。
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.
我创建了一个 plunker ,它使用两种方法切换侧边栏: [(已打开)] =_已打开
和 close()
和 open()
函数。它可以帮助您完成项目
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屋!