角度不正确的页边距左应用于Sidenav内容 [英] Angular Incorrect Margin-Left Applied To Sidenav Content

问题描述

我有一个使用Angular Material的Angular项目，但是遇到一个错误，有时mat-sidenav-content会应用一个margin-left: 365px;，这会导致sidenav和主要内容之间的空白很大.

I have an Angular project using Angular Material but I'm running into a bug where sometimes the mat-sidenav-content has a margin-left: 365px; applied to it that causes a large white space between the sidenav and the main content.

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

It happens about 50% of the time when I load the app, the margin-left is applied. The rest of the time it is fine. However, if I click the menu button to hide the menu and show it again, then it is fixed until I reload the app.

我觉得这可能与我的isMobile()函数和竞争条件有关，但不确定.

I feel like it might have something to do with my isMobile() function and race condition, but not sure.

在我的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

In my 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.

Edit: Inside ngAfterViewInit() I get the this.sidenav._width, sometimes it is 365 and sometimes it is 167.

我的问题可能有所缩小.我的mat-nav-list内部有一个

I may have narrowed down my problem a little bit. Inside my mat-nav-list I have a

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

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

It only happens when I have this component.

<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

I can add as many sidenav-element and it still works fine, only when I have sidenav-group

推荐答案

好像我发现了问题.在sidenav-group我有

Looks like I found the issue. Inside sidenav-group I had

<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>有时会插入多余的空间.

For some reason the <i> would sometimes insert extra space.

这篇关于角度不正确的页边距左应用于Sidenav内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！