应用于 Sidenav 内容的 Angular 不正确 Margin-Left [英] Angular Incorrect Margin-Left Applied To Sidenav Content

问题描述

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

当我加载应用程序时，大约有 50% 的时间会应用 margin-left.其余时间还好.但是，如果我点击菜单按钮隐藏菜单并再次显示它，那么它会被修复，直到我重新加载应用程序.

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

在我的app.component.html

<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:固体;">...</mat-nav-list></mat-sidenav><!--此处应用了magin-left--><mat-sidenav-content><路由器插座></路由器插座></mat-sidenav-content></mat-sidenav-container><mat-toolbar style="padding: 0px;background: #e9ecef;"><mat-toolbar-row>...</mat-toolbar-row></mat-toolbar>

在我的 app.component.ts 中

导出类 AppComponent 实现 OnInit {private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKPOINT}px)`);@ViewChild('sidenav') public sidenav: MatSidenav;构造函数(区域:NgZone){this.mediaMatcher.addListener(mql => zone.run(() => this.mediaMatcher = mql));}公共 ngOnInit(): 无效 {this.sidenav.open();}isMobile(): 布尔{返回 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>{{标签}}<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>

</a><div *ngIf="displayBody"><!-- 搜索--><sidenav-element [icon]="'search'" [label]="'Search'" [route]="'deposit/search'" [currentRoute]="currentRoute"(changeRouteOutput)="changeRoute($event)"></sidenav-element><!-- 检查--><sidenav-element [label]="'Cheque'" [route] ="'deposit/cheque'" [currentRoute]="currentRoute"(changeRouteOutput)="changeRoute($event)"></sidenav-element><!-- 预授权--><sidenav-element [label]="'Pre-Authorization'" [route] ="'deposit/pre-auth'" [currentRoute]="currentRoute"(changeRouteOutput)="changeRoute($event, false)"></sidenav-element>

我可以添加尽可能多的 sidenav-element 并且它仍然可以正常工作，只有当我有 sidenav-group

解决方案

我好像发现了这个问题.在 sidenav-group 里面我有

keyboard_arrow_down<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 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.

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.

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

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

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

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

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>

I can add as many sidenav-element and it still works fine, only when I have 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>

When I should have

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

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

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