在angular2中实现可折叠侧边栏

Question

将html jquery adminlte仪表板转换为angular2

以前使用Jquery时，侧边栏会被隐藏并使用toggle()

显示

现在我如何在angular2

中做到这一点

使用Almaaseed admin lte template

这就是我试过的

我有一个仪表板组件

export class DashboardComponent {
 public constructor(private titleService: Title) {

  }

  onSidenavigation(){
    //i would like to perform toggle
  }

这是切换显示的按钮

<a href="#" class="sidebar-toggle" data-toggle="offcanvas" (click)="onSidenavigation()" 
  role="button">
    <span class="sr-only">Toggle navigation</span>
  </a>

我已查看this link但尚无答案

Answer 1

您可以进行CSS最大高度转换。使用template属性设置动画高度的css类。切换单击按钮时设置类的属性。像这样......

<div id="sidebar" [class.sidebar-is-visible]="sidebarIsVisible">

<button (click)="sidebarIsVisible = !sidebarIsVisible">

#sidebar {
    max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;
}
#sidebar.sidebar-is-visible {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
}