>

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

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

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

isMobile() 에서

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

sidenav-group

  • 답변 # 1

    문제를 찾은 것 같습니다. 와이즈 비즈 내부  나는

    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> 들어  때때로 여분의 공간을 삽입 할 것입니다.

  • 답변 # 2

    로 설정하여 수정 한 비슷한 문제가 있습니다

    <i>
    
    

    그리고

    mat-sidenav-content {
        margin-left: 0 !important;
        flex: 1 1 auto;
    }
    
    
    mat-sidenav { flex: 0 1 auto; } 와 함께 과 [style.position]="sidenav.opened ? 'initial' : 'absolute'" 에 플렉스 .

  • 답변 # 3

    이 오류는 아이콘으로 인한 것입니다. 연결 속도가 느린 재로드 (캐시 지우기) 후 angular는 아이콘 이름으로 문자열을 렌더링하기 시작합니다. 문자열이 완전히 렌더링 된 아이콘보다 크기 때문에 추가 공간이 있습니다. 새로 고침 후 아이콘이 이미 기기 저장소에 있기 때문에 이런 일이 발생하지 않습니다.

    내 해결책은 사이드 바 너비 값을 인라인으로 수정하는 것이 었습니다.

  • 답변 # 4

    내가 생각 해낸 것은 (angular의 mat-sidenav-container 사용) ) :

    flex-layout
    
    
    <div fxLayout="column" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
      <mat-toolbar fxFlex="none">
        <div fxFlex="grow">
          <button mat-button (click)="sidenav1.toggle()">toggle nav1</button>
        </div>
        <div fxFlex="none">
          <button mat-button (click)="sidenav2.toggle()">toggle nav2</button>
        </div>
      </mat-toolbar>
      <mat-sidenav-container fxFlex="grow" fxLayout="row">
        <mat-sidenav opened mode="side" #sidenav1 fxFlex="none"
            [style.position]="sidenav1.mode !== 'over' && sidenav1.opened ? 'relative' : 'absolute'"
            style="width: 240px; background-color: red;">
          nav1
        </mat-sidenav>
        <mat-sidenav opened mode="over" position="end" #sidenav2 fxFlex="none"
            [style.position]="sidenav2.mode !== 'over' && sidenav2.opened ? 'relative' : 'absolute'"
            style="width: 240px; background-color: blue;">
          nav2
        </mat-sidenav>
        <mat-sidenav-content fxFlex="grow" style="background-color: green;">
          content
        </mat-sidenav-content>
      </mat-sidenav-container>
    </div>
    
    

    데스크톱 및 모바일에서 완벽하게 작동

    편집 : Stackblitz :https://stackblitz.com/edit/angular-r13fve

    .mat-sidenav-content { margin-left: 0 !important; }

  • 이전 MySQL-Python 코드가 작동하지 않아서 수정하려고 할 때마다 다양한 오류가 발생합니다
  • 다음 python - 정기적 인 런타임 (분)을 사용할 때 내 오류는 25이지만 런타임 로그를 가져 오면 (정상적으로) 내 오류는 03입니까?