angular 4 "Cannot read property ' toggle' of undefined"，同时使用 *ngIf ="sidemenuu == true"到侧边菜单

Question

angular 4“无法读取未定义的属性'toggle'”，同时使用*ngIf="sidemenuu == true"到侧边菜单

侧菜单.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

侧菜单

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() {

}

}

这是其他路径的错误

错误

SideMenuComponent.html:40 错误类型错误:无法读取属性“切换”
不明确的

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">