如何在页面加载时不打开mat-sidenav

Question

我和BehaviorSubject有个交换服务。

service.ts

    export class ToggleSidenavService {
       public sideNavToggleSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(null);

       public toggle() {
          return this.sideNavToggleSubject.next(null);
       }
    }

Component.html

      @ViewChild('sidenav', {static: true}) public sidenav: MatSidenav;

     ngOnInit() {
        this.sidenavService.sideNavToggleSubject.subscribe(() => {
        this.sidenav.toggle();
       });
     }

Sidenav开关工作正常，但它总是在页面加载时打开。我怎么才能解决这个问题？

Answer 1

要确保页面加载时始终关闭Sidenav，请将opened属性设置为HTML中的false。

<mat-sidenav #sidenav mode="side" opened="false">
  Sidenav content
</mat-sidenav>

要以编程方式关闭Sidenav，可以在ngAfterViewInit()中调用close()方法，但如果设置了opened，则不需要这样做。

@ViewChild('sidenav', {static: true}) public sidenav: MatSidenav;

ngAfterViewInit() {
    this.sidenav.close();
}