angular-material - 角度 Material mat-sidenav 异步内容区域未渲染在正确的位置

Question

我有一个非常适合模拟数据的 sidenav，但是当我从休息服务异步加载 sidenav 的数据时，内容部分会呈现在整个页面区域上，然后当异步调用返回时，sidenav 就会呈现，并最终覆盖部分内容区域。如果我关闭侧导航并再次打开，它看起来会找到。但是，在初始加载时，我看不到内容的左侧部分。

    <mat-sidenav-container fullscreen class="main-sidenav-container">
    <mat-sidenav #sidenav mode="side" opened>
        <mat-nav-list>
            <mat-list-item disa *ngFor="let navBarItem of observableNavBarItems|async" (click)="onSelected(navBarItem.value)">
                <img mat-list-icon class="{{navBarItem.icon}}" />
                <h4  mat-line>{{navBarItem.name}}</h4>
        </mat-list-item>
        </mat-nav-list>
        </mat-sidenav>
    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
</mat-sidenav-container>

关于如何解决这个问题有什么想法吗？

Answer 1

我通过根据 Angular Materials 文档设置以下 MatDrawerContainer 属性解决了类似的问题(使用 MatDrawer):https://next.material.angular.io/components/sidenav/api

• @Input() 自动调整大小: bool 值

  是否在大小达到时自动调整容器大小 它的任何抽屉都会发生变化。

  使用风险自负!启用此选项可能会导致布局抖动 通过在每个变化检测周期测量抽屉。可 通过 MAT_DRAWER_DEFAULT_AUTOSIZE token 进行全局配置。

就我而言:

<mat-drawer-container autosize="true" >
  <mat-drawer #drawer mode="side" opened="true">
    ...
  </mat-drawer>
  <mat-drawer-content>
    ...
  </mat-drawer-content>
</mat-drawer-container>