Question

我是angular2的新手我想使用ng-sidebar创建侧边栏，但是他们在readme.MD文档中提供的文档非常令人困惑。我无法在我已经构建的应用程序中实现。如果有人在ng-sidebar有任何实施经验，请告诉我如何在我的应用程序中调用该组件？我对forRoot方法非常困惑。

Answer 1

设定：

运行npm install --save ng-sidebar
在app.module.ts中添加以下内容：
```
import { SidebarModule } from 'ng-sidebar';
```
在SidebarModule.forRoot()的{{1}}内添加imports: []，如下所示：
```
@NgModule
```
在@NgModule({ declarations: [AppComponent], imports: [BrowserModule, SidebarModule.forRoot()], bootstrap: [AppComponent], })添加：
```
app.component.html
```
在<ng-sidebar-container> <ng-sidebar [(opened)]="_opened"> <p>Sidebar contents</p> </ng-sidebar> <div ng-sidebar-content> <button (click)="_toggleSidebar()">Toggle sidebar</button> </div> </ng-sidebar-container>添加：
```
app.component.ts
```

Working demo

Code of working demo/Example of calling ng-sidebar in component

Answer 2

对于Angular6，如果您遇到侧边栏未显示的问题（由于未出现侧边提示失败），在@Nehal提供的code中添加高度样式元素，如下所示：

<ng-sidebar-container
    style = "height: 100vh">

    <ng-sidebar [(opened)]="_opened" mode = "push" >
         <p> this is in sidebar</p>
    </ng-sidebar>

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

请参阅我以前对Working Code

的回答

需要ng-sidebar实现的任何运行示例

2 个答案: