在新的浏览器窗口中打开时，第一次无法在侧面导航中切换角度材质

Question

我正在使用angular5和angular材质，当我在新的浏览器窗口中打开应用程序时，无法切换我的sidenav，但是当我重新加载同一窗口时，我可以切换side-nav。我很好奇为什么不第一次开放？

我尝试使用侧面导航API（例如切换，打开等），甚至更改了我的html结构，仍然出现问题。

<mat-sidenav-container class="example-container">
    <mat-sidenav  #sideNav mode="over" [position]="nav_position">
      <div class="drawer-container center-content">
          <div class="header">
              <span class="title">{{navLabel}}</span> 
              <span class="gray-label padding-rt-12" (click)="reset()">Reset</span>
           </div>
           <div class="content">
               <app-contact-preference [getAction]="actions.asObservable()"></app-contact-preference>
           </div>
           <div class="footer">
               <button mat-stroked-button color="primary" class="cancel" (click)="toggle()">Close</button>
               <button mat-raised-button color="primary" (click)="save()">Save</button>
           </div>
      </div>
    </mat-sidenav>
    <mat-sidenav-content class="center-content">
      <app-title (sideEvent)="catchEvent()"></app-title>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>

//////////////////
@ViewChild('sideNav') public sidenav: MatSidenav;

 catchEvent(){
    this.sidenav.toggle();
  }

让我知道，如果我需要任何其他数据，真的在寻找您的帮助，谢谢。