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

Posted 2023-03-13

【中文标题】页面加载时如何不打开mat-sidenav

【英文标题】：How not to open mat-sidenav when page loads

【发布时间】：2020-05-11 06:36:09

【问题描述】：

我已经获得了使用 BehaviorSubject 进行 mat-sidenav 切换的服务。

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 切换工作正常，但它总是在页面加载时打开。我该如何解决这个问题？

【问题讨论】：

你如何控制sideNavToggleSubject 打开/关闭模态，它看起来总是发出null值。剂量是否意味着始终开放？

按钮可以切换sidenav打开/关闭状态

【参考方案1】：

为确保在页面加载时始终关闭Sidenav，请在 html 模板中将opened 属性设置为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();

【讨论】：

是的，它可以工作，但我可以看到 sidenav 在视图初始化后如何播放关闭动画

@OlegShchegolev 查看在 HTML 模板中设置 opened 属性的更新答案。