Angular 6 Mat-SideNav切换菜单不起作用

Question

我已经在Angular 6中创建了一个侧边栏导航菜单。

更新：

但是，当我单击切换菜单图标侧栏时，导航栏不应全角展开。

但是，在单击侧边栏中的切换菜单图标（来自侧边栏组件）时，我不确定哪里出错了。

sidenav.component.html

<mat-sidenav-container fullscreen>
  <mat-sidenav #sidenav  mode="side" class="example-sidenav" [ngStyle]="{ 'width.em': sidenavWidth }" opened="true" (mouseenter)="increase()"
    (mouseleave)="decrease()">
    <div class="logomain">Logo Part</div>
    <mat-nav-list>
      <mat-list-item routerLink="1" routerLinkActive="active" >
        <mat-icon mat-list-icon>person</mat-icon>
        <div fxFlex="10"></div>
        <div *ngIf="sidenavWidth > 6" class="sidenav-item">
          <h5 class="lead">About</h5>
        </div>
      </mat-list-item>

      <mat-list-item routerLink="2" routerLinkActive="active">
        <mat-icon mat-list-icon>settings</mat-icon>
        <div fxFlex="10"></div>
        <div *ngIf="sidenavWidth > 6" class="sidenav-item">
          <h5 class="lead">Services</h5>
        </div>
      </mat-list-item>

      <mat-list-item routerLink="3" routerLinkActive="active">
        <mat-icon mat-list-icon>local_phone</mat-icon>
        <div fxFlex="10"></div>
        <div *ngIf="sidenavWidth > 6" class="sidenav-item">
          <h5 class="lead">Contact</h5>
        </div>
      </mat-list-item>



    </mat-nav-list>

  </mat-sidenav>

  <div class="example-sidenav-content">
    <router-outlet></router-outlet>
    <mat-icon (click)="sidenav.toggle()" class="sidenav-menu">menu</mat-icon>
  </div>


</mat-sidenav-container>

sidenav.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component ({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.css']
})

export class SidenavComponent implements OnInit {
  sidenavWidth = 4;
  ngStyle: string;
  constructor (private router: Router) {

  }

  ngOnInit () {

  }

  increase() {
    this.sidenavWidth = 15;
    console.log('increase sidenav width');
  }
  decrease() {
    this.sidenavWidth = 4;
    console.log('decrease sidenav width');
  }
  // sidenavToggle() {
  //   this.ngStyle = 'this.sidenavWidth = 15';
  //   console.log('sidenav width incrases');
  // }
}

运行stackblitz示例： https://stackblitz.com/edit/angular-material-with-angular-sidenav