angular 4 "Невозможно прочитать свойство 'toggle' of undefined" при использовании * ngIf = "sidemenuu == true" в боковом меню

Question

angular 4 "Невозможно прочитать свойство 'toggle' of undefined" при использовании * ngIf = "sidemenuu == true" для бокового меню

бок menu.html

<button mat-icon-button (click)="snav.toggle()" value="sidebarclosed">
<mat-icon>menu</mat-icon>
</button>
<span fxFlex></span>
<app-header></app-header>
 </mat-toolbar>
 <mat-sidenav-container class="example-sidenav-container" 
[style.marginTop.px]="mobileQuery.matches ? 0 : 0">
    <mat-sidenav #snav id="snav" class="dark-sidebar pl-xs" 
[mode]="mobileQuery.matches ? 'side' : 'over'" fixedTopGap="0" 
[opened]="mobileQuery.matches" [disableClose]="mobileQuery.matches" 
*ngIf="sidemenuu == true" >
        <app-sidebar  ></app-sidebar>
    </mat-sidenav>
    <mat-sidenav-content class="page-wrapper">
        <div class="page-content">
            <router-outlet>
                <app-spinner></app-spinner>
            </router-outlet>
        </div>
    </mat-sidenav-content>

 </mat-sidenav-container>

Вот вижу, если location.path (); имеет indexOf ('day'), а затем sidemenuu в false

побочный menu.ts

export class SideMenuComponent implements OnDestroy, AfterViewInit {
mobileQuery: MediaQueryList;
url = '';
public sidemenuu: boolean = false;
private _mobileQueryListener: () => void;

constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, 
location: Location, router: Router, public menuItems: MenuItems) {
this.mobileQuery = media.matchMedia('(min-width: 768px)');
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
this.mobileQuery.addListener(this._mobileQueryListener);
router.events.subscribe((val) => {
  this.url = location.path();
  this.sidemenuu = true;
  if (((this.url.indexOf('day')) > -1)) {
    this.sidemenuu = false;
  } else {
    this.sidemenuu = true;
    }
  });
 }

ngOnDestroy(): void {
this.mobileQuery.removeListener(this._mobileQueryListener);
}
ngAfterViewInit() {

}

}

это ошибка, которую я получаю для других путей

Error

SideMenuComponent.html: 40 ОШИБКА TypeError: Невозможно прочитать свойство 'toggle' из не определен

at Object.eval [as handleEvent] (SideMenuComponent.html:40)
at handleEvent (core.js:13589)
at callWithDebugContext (core.js:15098)
at Object.debugHandleEvent [as handleEvent] (core.js:14685)
at dispatchEvent (core.js:10004)
at eval (core.js:10629)
at HTMLButtonElement.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4751)
at ZoneDelegate.invokeTask (zone.js:420)

Answer 1

, так как ваша кнопка находится "вне" mat-sidenav-container, вы можете использовать ViewChild

//In component.ts
@ViewChild('sidenav') sidenav:any;
toggleSidenav()
  {
    this.sidenav.toggle();
    console.log(this.sidenav.toggle);
  }

//In your .html
<button mat-icon-button (click)="toggleSidenav()" value="sidebarclosed">