css - 사이드 네비게이션 콘텐츠에 적용된 각도가 잘못된 여백 왼쪽

Angular Material을 사용하는 Angular 프로젝트가 있지만 때로는 mat-sidenav-content 가있는 버그가 발생합니다.   margin-left: 365px; 가있다  사이드 바와 기본 콘텐츠 사이에 큰 공백이 생기도록 적용했습니다.

앱을로드하면 시간의 약 50 %가 발생합니다.  은 적용되다. 나머지 시간은 괜찮습니다.그러나메뉴 버튼을 클릭하여 메뉴를 숨기고 다시 표시하면 앱을 다시로드 할 때까지 고정됩니다.

내 margin-left 와 관련이있는 것 같아  기능 및 경쟁 조건이지만 확실하지 않습니다.

app.component.html

내 app.component.ts에서

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

수정: 내부 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 가있을 때만 여전히 잘 작동합니다.