如何在用户未登录时让mat-sidenav-container实现全屏？

编译报错的核心原因是：mat-sidenav-container没有名为fullscreen的输入属性，所以[fullscreen]="!loggedIn"这种写法不被Angular识别。

下面是两种可行的实现方案：

方案1：动态绑定CSS类控制全屏 #

先在组件的CSS文件中定义全屏样式类：

.fullscreen-container {
  height: 100vh;
  width: 100vw;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

然后在模板中动态添加这个类：

<mat-sidenav-container 
  class="sidenav-container" 
  [class.fullscreen-container]="!loggedIn">
  <mat-sidenav #sidenav 
    [class.mat-elevation-z4]="true" 
    mode="side" 
    class="sidenav" 
    [fixedInViewport]="true"
    [fixedTopGap]="0" 
    [fixedBottomGap]="0" 
    opened>
    <app-side-menu></app-side-menu>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="content-container">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

方案2：内联样式动态绑定 #

直接通过[style.*]指令动态设置宽高：

<mat-sidenav-container 
  class="sidenav-container" 
  [style.height]="!loggedIn ? '100vh' : 'auto'"
  [style.width]="!loggedIn ? '100vw' : 'auto'"
  [style.position]="!loggedIn ? 'fixed' : 'relative'"
  [style.top]="!loggedIn ? '0' : 'auto'"
  [style.left]="!loggedIn ? '0' : 'auto'">
  <mat-sidenav #sidenav 
    [class.mat-elevation-z4]="true" 
    mode="side" 
    class="sidenav" 
    [fixedInViewport]="true"
    [fixedTopGap]="0" 
    [fixedBottomGap]="0" 
    opened>
    <app-side-menu></app-side-menu>
  </mat-sidenav>
  <mat-sidenav-content>
    <div class="content-container">
      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>

注意事项 #

• 如果使用方案1，需要确保.sidenav-container的默认样式不会和全屏类冲突，必要时可以提高选择器优先级。
• 若页面存在全局的body margin/padding，需要额外设置body { margin: 0; padding: 0; }来消除全屏时的间隙。

内容的提问来源于stack exchange，提问作者LFD97