Angular Material：在不指定宽度的情况下将自定义 sidenav 从长格式转换为图标

Question

我有一个<sidenav>，它可以使用菜单按钮有效地在文本加图标和仅图标之间切换，<sidenav-content> 通过转换自动调整大小。

<sidenav> 本身不会转换。我目前根据其内容调整其宽度，并且不希望为每个状态指定宽度，但是当我尝试调用 Angular 转换而不指定打开和关闭状态的样式时，转换似乎不起作用。

HTML

<!--HEADER WITH MENU TOGGLE BUTTON-->
<mat-toolbar role="banner" class="flexSpaceBetween">
  <span *ngIf="screenWidth >= 840">
    <button mat-raised-button
            class="menuBtn"
            matTooltip="Minimize menu"
            [matTooltipDisabled]="!isExpanded"
            matTooltipShowDelay="400"
            (click)="toggle()">
      <mat-icon>menu</mat-icon>
      Menu
    </button>
  </span>
</mat-toolbar>

<!--SIDENAV-->
<mat-sidenav-container class="fullPage" autosize>
  <mat-sidenav #sidenav
               mode="side"
               class="mat-elevation-z3"
               [@openClose]="isExpanded ? 'open' : 'closed'"
               [opened]="screenWidth >= 840">
    <div mat-subheader *ngIf="isExpanded">General</div>
    <mat-nav-list *ngFor="let app of generalApps">
      <mat-list-item class="sidebarItem"
                     [matTooltip]="app.tooltip"
                     [matTooltipShowDelay]="tooltipDelay"
                     [routerLink]="app.route">
        <mat-icon mat-list-icon>{{app.icon}}</mat-icon>
        <span *ngIf="isExpanded">{{app.title}}</span>
      </mat-list-item>
    </mat-nav-list>
  <mat-sidenav-content class="component">
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>

TS

import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('openClose', [
      state('open', style({
        // IF I SPECIFY A WIDTH HERE, TRANSITION WORKS
      })),
      state('closed', style({
        // IF I SPECIFY A WIDTH HERE, TRANSITION WORKS
      })),
      transition('open <=> closed', [
        animate('1s')
      ]),
    ]),
  ],
})
export class AppComponent {
  isExpanded = true
  toggle() { this.isExpanded = !this.isExpanded }
}

编辑

不确定 jsFiddle 是否可以在此处与 Angular 一起使用，但在此处创建：

https://jsfiddle.net/3cuhk910/10/

Answer 1

您可以在“打开”状态下使用width:*，参见docs中的示例

animations: [
    trigger('openClose', [
      state('open', style({
        width:'*'
      })),
      state('closed', style({
        width:'0'
      })),
      transition('open <=> closed', [
        animate('1s')
      ]),
    ]),
  ],