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
- 답변 # 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; }
관련 자료
- 양식 유효성 검사가 적용될 때 각도 반응 양식이 API에 도달하지 않음
- angular7 - 행동 주제 사이드 나비 토글 각도 7 재질
- css - angular 7 - 왜 클래스 스타일이 dom 컴포넌트에 적용되지 않습니까?
- 각도 부모 폼 컨트롤 부트 스트랩/CSS는 자식 구성 요소에 적용되지 않습니다
- html table - 각도 6에서 잘못된 배열 정렬
- HTML 테이블에 잘못된 날짜/년을 표시하는 각도 날짜 파이프
- 요소 재배 열에 적용되는 각도 애니메이션
- Angular Material sidenav는 항상 데스크탑에서 열립니다
- 각도 구성 요소의 DataTable에 스타일이 적용되지 않음
- css : Angular 애플리케이션이로드 될 때 예상되는 머티리얼 버튼 스타일이 바로 적용되지 않는 이유는 무엇입니까?
- html : 표 셀에서 쉼표로 구분 된 단어를 나누는 방법
- Angular 6에서 암호 확인 확인 [중복]
- html : Angular 10-자식이있는 동안 부모에서 스크롤 비활성화
- angular : 각도 재질 드롭 다운으로 선택한 색상 또는 글꼴을 만드는 방법은 무엇입니까?
- Angular 2 : TypeError : 함수가 아닙니다.
- html : KendoUI 칩에 로컬 환경의 경계가 없습니다.
- angular : 각도 매트 테이블에 테두리 반경을 추가하는 방법은 무엇입니까?
- angular : 서버 쪽 페이지 매김이있는 매트 테이블-각도
- Rest Api의 직원 이름을 표시하는 Angular Material Autocomplete
문제를 찾은 것 같습니다. 와이즈 비즈 내부 나는
필요할 때
어떤 이유
<mat-icon mat-list-icon *ngIf="!displayBody">keyboard_arrow_down</mat-icon> <mat-icon mat-list-icon *ngIf="displayBody">keyboard_arrow_up</mat-icon>
들어 때때로 여분의 공간을 삽입 할 것입니다.