javascript - 动态改变 Angular 6 侧边栏的宽度和模式

Question

我正在使用 Angular 6 开发一个应用程序，我想要一个响应式侧边栏，并决定使用 Angular Material 的侧边栏模块。问题是:我希望侧边栏有一个不完全隐藏的折叠模式，这不是 angular 侧边栏的工作方式，所以我做了类似于 this 的操作。 (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>

并且，在我的组件上:

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';
    }
  }
}

collapse() 是当您单击按钮展开/折叠边栏时调用的方法。

现在，问题是什么？当我的分辨率宽度小于 1366 时，侧边栏从展开变为折叠，主要内容会移位，就像侧边栏设置为模式 'side'(这是正确的)一样，但它是宽度是展开时的宽度，而不是折叠时的宽度。

它如何表现的图像:

全屏扩展(工作正常)

全屏折叠(工作正常)

小屏幕展开(工作正常)

小屏幕折叠(侧边栏和主要内容之间的奇怪空间)

有谁知道为什么会这样？或者应该怎么做才能达到预期的效果？

提前致谢

Answer 1

有一个类似的问题，一个修复可能是启用 [autosize]="true"在 <mat-sidenav-container>

你也可以看看:https://github.com/angular/material2/issues/6743它提供了一些其他的 hacky 解决方法。