角度不正确的页边距左应用于Sidenav内容

Question

我采用了棱角分明的材质角项目，但我运行到哪里有时候一个错误mat-sidenav-content有一个margin-left: 365px;适用于它引起sidenav和主要内容之间有很大的空白。

加载应用后，大约50％的时间会发生margin-left。其余时间都可以。 但是，如果我单击菜单按钮以隐藏菜单并再次显示它，则该问题将得到修复，直到我重新加载该应用程序为止。

我觉得这可能与我的isMobile()功能和比赛状况有关，但不确定。

在我的 app.component.html

<div class="app-container">
    <mat-toolbar color="primary">
        <mat-toolbar-row>
            ...
        </mat-toolbar-row>
    </mat-toolbar>
    <mat-sidenav-container class="mat-container" >
        <mat-sidenav #sidenav class="mat-sidenav" [opened]="!isMobile()" [mode]="isMobile() ? 'over': 'side'" style="background: rgb(30, 136, 229);">
            <mat-nav-list class="mat-nav-list" role="list" style="padding-top: 0px;border-top-width: thin;border-top: white;border-top-style: solid;">
                ...
            </mat-nav-list>
        </mat-sidenav>

        <!--The magin-left is being applied here-->
        <mat-sidenav-content>
            <router-outlet></router-outlet>
        </mat-sidenav-content>

    </mat-sidenav-container>

    <mat-toolbar style="padding: 0px;background: #e9ecef;">
        <mat-toolbar-row>
            ...
        </mat-toolbar-row>
    </mat-toolbar>
</div>

在我的app.component.ts中

export class AppComponent implements OnInit {

    private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);

    @ViewChild('sidenav') public sidenav: MatSidenav;

    constructor(zone: NgZone) {
        this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));
    }

    public ngOnInit(): void {
        this.sidenav.open();
    }

    isMobile(): boolean{
        return this.mediaMatcher.matches;
    }
}

编辑：在ngAfterViewInit()我里面this.sidenav._width，有时是365，有时是167。

我的问题可能有所缩小。我里面mat-nav-list有一个

<sidenav-group [icon]="'local_atm'" [label]="'Deposits'" [currentRoute]="currentRoute"
                            (changeRouteOutput)="changeRoute($event, false)">
</sidenav-group>

只有当我有此组件时，它才会发生。

<a class="mat-list-item" mat-list-item="" role="listitem" (click)="toggleBody()"  style="color: white;">
    <div class="mat-list-item-content" style="display: flex; flex: 1; padding-left: 0px;">
        <div class="mat-list-item-ripple mat-ripple"></div>
        <div class="mat-list-text"></div>
        <mat-icon mat-list-icon>{{icon}}</mat-icon>
        {{label}}
        <span class="example-spacer"></span>
        <i class="material-icons" *ngIf="!displayBody">keyboard_arrow_down</i>
        <i class="material-icons" *ngIf="displayBody">keyboard_arrow_up</i>
    </div>
</a>

<div *ngIf="displayBody">
    <!-- Search -->
    <sidenav-element [icon]="'search'" [label]="'Search'" [route] ="'deposit/search'" [currentRoute]="currentRoute"
                    (changeRouteOutput)="changeRoute($event)">
    </sidenav-element>

    <!-- Cheque -->
    <sidenav-element [label]="'Cheque'" [route] ="'deposit/cheque'" [currentRoute]="currentRoute"
                    (changeRouteOutput)="changeRoute($event)">
    </sidenav-element>

    <!-- Pre-Authorization -->
    <sidenav-element  [label]="'Pre-Authorization'" [route] ="'deposit/pre-auth'" [currentRoute]="currentRoute"
        (changeRouteOutput)="changeRoute($event, false)">
    </sidenav-element>
</div>

我可以添加尽可能多的内容sidenav-element，但只有当我有sidenav-group

Answer 1

使用自动调整大小

<mat-sidenav-container autosize>
<mat-sidenav-container>

Answer 2

看起来我找到了问题。sidenav-group我有里面

<i class="material-icons" *ngIf="!displayBody">keyboard_arrow_down</i>
<i class="material-icons" *ngIf="displayBody">keyboard_arrow_up</i>

我应该什么时候

<mat-icon mat-list-icon *ngIf="!displayBody">keyboard_arrow_down</mat-icon>
<mat-icon mat-list-icon *ngIf="displayBody">keyboard_arrow_up</mat-icon>

由于某种原因，<i>有时会插入额外的空间。