2

我有一个可以很好地处理模拟数据的sidenav，但是当我从rest服务异步加载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>

关于如何解决这个问题的任何想法？

4

2 回答 2

1

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

  • @Input() 自动调整大小：布尔值

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

    使用风险自负！启用此选项可能会通过在每个更改检测周期测量抽屉来导致布局抖动。可以通过 MAT_DRAWER_DEFAULT_AUTOSIZE 令牌全局配置。

就我而言：

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

于 2021-01-26T11:31:58.493 回答
0

我有同样的问题，我找到了一个适合我的解决方案。首先，我需要托管 mat-nav-list 的组件在其视图被渲染后立即被调用。为了做到这一点，我选择使用指令 ( renderingDetector ) 来装饰 mat-nav-list。这是代码：

import { Directive, AfterViewInit, Output, EventEmitter } from '@angular/core';
@Directive({
  selector: '[renderingDetector]'
})
export class RenderingDetectorDirective implements AfterViewInit {
    @Output() onViewRendered = new EventEmitter<void>(true);

    ngAfterViewInit() {
        this.onViewRendered.emit();
    }
}

注意：作为一种可能的解决方案，我还尝试将整个 mat-nav-list 内容移动到一个单独的组件中，以控制它的生命周期以及它在指令内完成，但这种方法指向应用程序充电每次我点击一个项目时的页面（这样单页应用程序的所有好处都丢失了）。

另一方面，托管组件一直在监视它。

<mat-nav-list renderingDetector (onViewRendered)="viewRendered()">

为了让 mat-sidenav-content 准确地呈现在菜单旁边，我们应该正确设置margin-left属性。

@ViewChild('sidenavRef') sideNavRef: MatSidenav;
@ViewChild('sidenavContentRef', {read: ElementRef}) sideNavContentRef: ElementRef;
viewRendered() {
    this.sideNavContentRef.nativeElement.style.marginLeft = String(this.sideNavRef._width) + "px";
}

sidenavRef和sidenavContentRef指的是 html 文件中的 mat-sidenav 和 mat-sidenav-content 元素

<mat-sidenav-container>
    <mat-sidenav #sidenavRef>
        ...
    </mat-sidenav>
    <mat-sidenav-content #sidenavContentRef>
        ...
    </mat-sidenav-content>
</mat-sidenav-container>
于 2018-08-10T12:08:37.680 回答