mat-sidenav-container не позволяет отображать мою главную панель - PullRequest
Новая
       61

mat-sidenav-container не позволяет отображать мою главную панель

0 голосов
/ 28 апреля 2020

Я использую angular материал mat-sidenav и копирую его отсюда https://material.angular.io/components/sidenav/overview#creating -a-отзывчивый-layout-for-mobile-amp-desktop Я включаю его на страницу главной панели но я думаю, что стили для боковой навигации не позволяют отображать содержимое моей главной панели («тест для главной страницы» в коде ниже). и когда я меняю стили, это больше не «боковой» режим, и он становится поврежденным.

вот моя основная панель Код: 

<app-header></app-header>
<app-sidenav></app-sidenav>
test for main page(here is in my DOM but not displayed in page)

и вот мой app-sidenav html код: 

<div class="example-container" [class.example-is-mobile]="mobileQuery.matches">
 <div>
   <button style="position: absolute;z-index: 2" mat-icon-button (click)="snav.toggle();">
     <mat-icon>menu</mat-icon>
   </button>
 </div>
 <mat-sidenav-container class="example-sidenav-container"
                     [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
<mat-sidenav opened="true" (openedStart)="loadSidenaveLinks()" style="width: 175px" #snav [mode]="mobileQuery.matches ? 'over' : 'side'"
             [fixedInViewport]="mobileQuery.matches" fixedTopGap="56">
  <mat-nav-list style="margin-top: 20px;">
    <a mat-list-item *ngFor="let nav of links" (click)="navigateToLinks(nav.moduleId)">
      <div>
        {{nav.moduleName}}
      </div>
    </a>
  </mat-nav-list>
</mat-sidenav>
  <mat-sidenav-content  fxFlex="100" fxLayout="column" fxLayoutAlign="center stretch">
    <router-outlet></router-outlet>
  </mat-sidenav-content>
 </mat-sidenav-container>
</div>

и вот мое приложение-sidenav css код: 

.example-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin-top: 54px;
}
.example-is-mobile .example-toolbar {
  position: fixed;
  z-index: 2;
}
h1.example-app-name {
  margin-left: 8px;
}
.example-sidenav-container {
 flex: 1;
}
.example-is-mobile .example-sidenav-container {
   flex: 1 0 auto;
 }

большое спасибо за вашу помощь

...