祝好运.

home.component.html

<div>

  <mat-sidenav-container>

    <mat-sidenav #adminNavMenu mode="side" opened="true" style="min-width:60px; background: #F3F3F3;" class="shadow_right" autosize>

      <!-- MENU LEFT -->
      <!-- MENU LEFT -->
      <app-admin-menu-left></app-admin-menu-left>

    </mat-sidenav>

    <!-- ================================================================= -->
    <!-- ************************* MAIN CONTAINER ************************ -->
    <!-- ================================================================= -->
    <mat-sidenav-content [@onSideNavChange]="sideNavState">
      <div class="main_container" fxLayout="column" fxLayoutGap="0px" style="height:100vh;">

        <!-- =============================================================== -->
        <!-- Your main content -->
        <!-- =============================================================== -->

      </div>
    </mat-sidenav-content>

  </mat-sidenav-container>


</div>

home.component.ts

/**
 * George35mk
 */

import { Component,OnInit } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { trigger,state,style,transition,animate } from '@angular/animations';

import { MediatorService } from '@app-services/mediator/mediator.service';


@Component({
  selector: 'app-admin-analytics',templateUrl: './admin-analytics.component.html',styleUrls: ['./admin-analytics.component.css'],animations: [
    trigger('onSideNavChange',[
      state('close',style({
          'margin-left': '60px'
        })
      ),state('open',style({
          'margin-left': '250px'
        })
      ),transition('close => open',animate('250ms ease-in')),transition('open => close',]),trigger('onPageReady',[
      state('inactive',style({
          opacity: 0.4
        })
      ),state('active',style({
          opacity: 1
        })
      ),transition('inactive => active',transition('active => inactive',])
  ]
})
export class HomeComponent implements OnInit {


  /**
   * Get the sidenav state.
   */
  sideNavState: string = this.mediator.getSideNavState;



  constructor(
    private mediator: MediatorService,) { }

  ngOnInit() {


    // Subscribe on changes important.
    this.mediator.sideNavListener.subscribe( state => {
      this.sideNavState = state;
    });

  }


}

mediator.service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';


@Injectable()
export class MediatorService {

  APP_VERSION: String = 'v8.3.1.36';

  // default value.
  // this variable track the value between sessions.
  private _sideState: any = 'open';

  /**
   * This is the mini variant solution with animations trick.
   */
  sideNavListener: any = new Subject();

  get sideNavState() {
    return this._sideState;
  }

  setSidenavState(state) {
    this._sideState = state;
  }


  constructor() {

    this.sideNavListener.subscribe( state => {
      this.setSidenavState(state);
    });


  }


}

菜单left.component.html

<div class="sidenav_menu_left" 
    [@onSideNavChange]="sideNavState" 
    style="width:100%; height: 100vh;" 
    fxLayout="column" 
    [style.overflow]="overflowState">

    <p>Sidenav content left</p>

    <!-- this can toggle the sidenav -->
    <div fxFlex="100" (click)="toggleSideNav();" class="hoverble"></div>

</div>

菜单left.component.ts

import { Component,OnInit,Input } from '@angular/core';
import { MatSidenav } from '@angular/material';
import {trigger,animate,keyframes,query,group} from '@angular/animations';


// Mediator: the main service,later this service is gonna have more generic use.
import { MediatorService } from '@app-services/mediator/mediator.service';
import { delay } from 'q';


@Component({
  selector: 'app-admin-menu-left',templateUrl: './admin-menu-left.component.html',styleUrls: ['./admin-menu-left.component.css'],animations: [

    // animate sidenave
    trigger('onSideNavChange',style({
          width: '60px'
        })
      ),style({
          width: '250px'
        })
      ),])

  ]
})
export class MenuLeftComponent implements OnInit {


  /**
   * Get the sidenav state,*/
  sideNavState: string = this.mediator.sideNavState;


  overflowState: any = 'auto';

  constructor(
    private mediator: MediatorService
  ) {

  }

  ngOnInit() {

    this.mediator.sideNavListener.subscribe( state => {
      this.sideNavState = state;
    });

  }

  /**
   * On animation done.
   * @param x
   */
  animationEvent(x) {
    this.overflowState = 'auto';
  }

  /**
   * Toggle the sidenave state.
   *
   * Hides entire sidenav onclose.
   */
  setSideNavState() {
    this.mediator.toggle().then( snap => {
      console.log(snap);
    });
  }


  /**
   * Toggle,Open or close the sidenav.
   *
   * Set the sidenave state on mediator.
   */
  toggleSideNav() {

    switch (this.sideNavState) {

      case 'close':

        this.sideNavState = 'open';
        this.mediator.setSideNavState(this.sideNavState);

        setTimeout( () => {{
          this.sideNavText      = this.sideNavText === 'open' ? 'close' : 'open';
          this.sideNavIcon      = this.sideNavIcon === 'open' ? 'close' : 'open';
          this.sideNavCopyRight = this.sideNavCopyRight === 'open' ? 'close' : 'open';
        }},200);
      break;

      case 'open':
        this.sideNavText      = this.sideNavText === 'open' ? 'close' : 'open';
        this.sideNavIcon      = this.sideNavIcon === 'open' ? 'close' : 'open';
        this.sideNavCopyRight = this.sideNavCopyRight === 'open' ? 'close' : 'open';

        setTimeout( () => {{
          this.sideNavState = this.sideNavState === 'open' ? 'close' : 'open';
          this.mediator.setSideNavState(this.sideNavState);
        }},200);
      break;

      default:
        console.log('#6644');
        break;
    }

    this.overflowState = 'hidden';
  }

}