Как не открывать мат-сиденав при загрузке страницы

Question

У меня есть служба для переключения mat-sidenav с BehaviorSubject.

service.ts

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

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

Компонент. html

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

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

Переключатель Sidenav работает нормально, но он всегда открывается при загрузке страницы. Как я могу это исправить?

Answer 1

Чтобы гарантировать, что Sidenav всегда будет закрыт при загрузке страницы, установите для свойства opened значение false в шаблоне HTML.

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

Чтобы программно закрыть Sidenav, вы можете вызвать метод close() в ngAfterViewInit(), но это не обязательно, если установлено opened.

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

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