角度2材质2 Sidenav工具栏像导航抽屉一样折叠

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side" color="priMary">
     <md-toolbar color="priMary"><span>Sidenav</span></md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">
          <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
          <button md-button class="sidenav-link" (click)="sidenav.close()">
            <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
      </md-sidenav>
      <app-toolbar [sidenav]="sidenav"></app-toolbar>
</md-sidenav-container>

<md-toolbar color="priMary">
  <button md-button class="toolbar-menu-button"
          (click)="sidenav.toggle(); isCollapsed = !isCollapsed">
    <md-icon [@iconChange]="isCollapsed">menu</md-icon>
  </button>
  <span class="toolbar-spacer"></span>
  <button md-button class="toolbar-link" >DASHBOARD</button>
  <span class="toolbar-spacer"></span>
</md-toolbar>

这个问题有点不寻常.由于工具栏中的按钮控制打开和关闭状态,因此每次单击按钮时,我都必须添加一个EventListener以传递sidenav的状态.

基于事件标志,我添加了一些将保持sidenav宽度的ngStyle.请注意,sidenav现在总是打开[add property opened =“true”],因为它始终可见.我还最终使用工具栏中的发射标志来用于’Sidenav’标题.如果需要显示部分“Sid”,可以将其删除.

此外,由于sidenav始终打开,我添加了自定义css来设置宽度变化的动画.

Plunker demo

toolbar.component.ts：

export class ToolbarComponent implements OnInit {

  shortnav = true;

  @input() sidenav;

  @Output()
  change: EventEmitter<booelan> = new EventEmitter<Boolean>();

  constructor() { 
    console.log(this.sidenav);
  }

  ngOnInit() {
  }

  toggle(){
    this.shortnav = !this.shortnav;
    console.log("shortnav: " + this.shortnav)
    this.change.emit(this.shortnav);
  }

}

toolbar.component.html：

<button md-button class="toolbar-menu-button"
          (click)="toggle(); isCollapsed = !isCollapsed">

sidenav.component.ts：

export class SidenavOverviewExample {

  showSidenavtitle = false;
  sidenavWidth = 2.75;

  changeWidth(showShortNav){
    if(showShortNav){
      this.sidenavWidth = 2.5;
      this.showSidenavtitle = false;
    }
    else{
      this.sidenavWidth = 13;
      this.showSidenavtitle = true;
    }
  }
}

sidenav.component.html：

<md-sidenav-container fullscreen>
    <md-sidenav #sidenav mode="side"   
                color="priMary" 
                opened="true"
                [ngStyle]="{ 'width.em': sidenavWidth }"
                class="animate-sidenav">
     <md-toolbar color="priMary">
       <span *ngIf="showSidenavtitle">Sidenav</span>
     </md-toolbar>
        <button md-button class="sidenav-link" (click)="sidenav.close()">
          <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
          <button md-button class="sidenav-link" (click)="sidenav.close()">
            <md-icon>home</md-icon><span class="title"> HOME</span>
          </button>
      </md-sidenav>

      <app-toolbar [sidenav]="sidenav" (changE)="changeWidth($event)"></app-toolbar>

 </md-sidenav-container>

sidenav.component.css：

.mat-sidenav-transition .mat-sidenav{
  /* custom animation to grow and shrink width */
  -webkit-transition: width .3s !important; /* For Safari 3.1 to 6.0 */
  transition: width .3s !important;
}

希望这可以帮助你:)