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

Question

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

Answer 1

设置:

1. 运行npm install --save ng-sidebar

2. 在您的 app.module.ts 中，添加以下内容:

   import { SidebarModule } from 'ng-sidebar';
   

   在@NgModule中的imports: []内添加SidebarModule.forRoot()，应如下所示:

   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, SidebarModule.forRoot()],
     bootstrap: [AppComponent],
   })
   

3. 在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中添加:

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

Working demo

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