Javascript 动态更改角度6边栏'；s宽度和模式

我正在用Angular 6开发一个应用程序，我希望有一个响应性的侧栏，并决定使用Angular material的侧栏模块。问题是：我希望侧边栏有一个不完全隐藏的折叠模式，这不是角度侧边栏的工作方式，所以我做了类似于（Medium.com）的事情

现在，我希望侧边栏的行为：我希望它能够在屏幕分辨率高于1366的宽度时折叠或展开，并将模式设置为

'side'

，当分辨率小于该值时，如果折叠，我希望它设置为

'side'

，如果展开，我希望它设置为

'over'

我是怎么做到的：

<div id="complete-container">
  <mat-sidenav-container>
    <mat-sidenav opened="True" [style.width]="isExpanded ? expandedWidth : collapsedWidth" [mode]="mode">
      <app-sidebar *ngIf="isExpanded" [version]="version" [isExpanded]="isExpanded" (isExpandedEvent)="collapse($event)"></app-sidebar>
      <app-collapsed-sidebar *ngIf="!isExpanded" [version]="version" [isExpanded]="isExpanded" (isExpandedEvent)="collapse($event)"></app-collapsed-sidebar>
    </mat-sidenav>
    <mat-sidenav-content [style.margin-left]="isExpanded ? expandedWidth : collapsedWidth">
      <p>Main content</p>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

collapse（）

是单击按钮展开/折叠侧边栏时调用的方法

现在，这有什么问题？当我的分辨率宽度小于1366，边栏从展开变为折叠时，主要内容会被替换，就像边栏被设置为模式

'side'

（这是正确的），但它的宽度是展开时的宽度，而不是折叠时的宽度

其行为的图像：

全屏扩展（正常工作）

全屏折叠（工作正常）

小屏幕已展开（工作正常）

小屏幕崩溃（边栏和主要内容之间的奇怪空间）

有人知道为什么会这样吗？或者应该怎样做才能得到预期的结果

---

提前感谢

遇到类似问题，一个修复方法可能是在

上启用

[autosize]=“true”

您还可以查看： 它提供了一些其他的黑客解决方法

export class AppComponent {
  mobileQuery: MediaQueryList;
  private _mobileQueryListener: () => void;

  isExpanded: boolean;

  expandedWidth = '220px';
  collapsedWidth = '80px';
  mode: string;

  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    this.mobileQuery = media.matchMedia('(max-width: 1366px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }

  ngOnInit(): void {
    if (this.mobileQuery.matches) {
      this.isExpanded = false;
    } else {
      this.isExpanded = true;
    }
    this.mode = 'side';
  }

  collapse(change: boolean) {
    this.isExpanded = !this.isExpanded;
    if (this.mobileQuery.matches && this.isExpanded) {
      this.mode = 'over';
    } else {
      this.mode = 'side';
    }
  }
}