side-nav无法正常工作|角材料|角度7

Question

我有用角形材料制成的导航组件

@Bean
public Jackson2ObjectMapperBuilderCustomizer addMixin(){
    return new Jackson2ObjectMapperBuilderCustomizer() {
        @Override
        public void customize(Jackson2ObjectMapperBuilder jacksonObjectMapperBuilder) {
            jacksonObjectMapperBuilder.mixIn(User.class, UserMixin.class);                
        }
    };
}

//COMPONENT TS FILE

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, filter } from 'rxjs/operators';
import { MatDialog } from '@angular/material';
import { LoginDialogComponent } from '../login-dialog/login-dialog.component';
import { JoinDialogComponent } from '../join-dialog/join-dialog.component';
import { NavigationEnd, Router } from '@angular/router';

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent {
  navItems: Object = [
    { path: '/buy', text: 'Buy', active: false },
    { path: '/rent', text: 'Rent', active: false },
    { path: '/sell', text: 'Sell', active: false },
    { path: '/mortgages', text: 'Mortgages', active: false }
  ];

  isAuthorized = false;
  navExpand = false;

  isHandset$: Observable<boolean> = this.breakpointObserver
    .observe(Breakpoints.Handset)
    .pipe(map(result => result.matches));

  constructor(
    private breakpointObserver: BreakpointObserver,
    public dialog: MatDialog,
    private router: Router
  ) {
    this.router.events
      .pipe(filter(event => event instanceof NavigationEnd))
      .subscribe(res => {
        if (this.router.url === '/buy' || this.router.url === '/rent') {
          this.navExpand = true;
        } else {
          this.navExpand = false;
        }
      });
  }

  loginDialog(): void {
    this.dialog.open(LoginDialogComponent, {});
  }

  joinDialog(): void {
    this.dialog.open(JoinDialogComponent, {});
  }
}

//COMPONENT CSS FILE

.mat-toolbar-row,.mat-toolbar-single-row {
  height: 50px;;
 }

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
  background: rgba(255, 255, 255, 0.8);
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

.hidden {
  display: none;
}

@media screen and (min-width: 768px) {
  .sidenav {
    display: none;
  }
}

.spacer {
  flex: 1 1 auto;
}

mat-toolbar-row {
  max-width: 1280px;
}

mat-toolbar {
  align-items: center;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  max-height: 50px;
  min-height: 50px;
  transform: translateZ(1px);
  z-index: 9999;
  background: #fff
}

.nav-expand {
  max-width: 100%;
  padding: 0;
  background: #f5f5f5;
}

.nav-header {
  position: fixed;
}

mat-chip-list {
  margin: 0 1.2vw;
}

.logo-default {
  margin-top: 51px;
  cursor: pointer;
  height: 101px;
  width: 100px
}

.logo-default:focus {
    outline: none;
}

.logo-default:hover {
    filter: brightness(90%);
}

mat-chip:hover {
  cursor: pointer;
}

mat-chip-list {
  flex-wrap: nowrap;
}

.mat-button {
  margin: 0 5px;
}

mat-chip a {
  text-decoration: none;
}

.divider {
  font-weight: normal;
  margin: 0 10px;
}

mat-chip a,
.divider,
.mat-button,
.nav-button {
  font-family: "Poppins", sans-serif;
  color: #444;
  font-size: 15px;
}

a.active {
  background: #ccc !important;
}

它可以工作，但是在移动横向分辨率方面存在错误（旋转屏幕），出现sidenav菜单按钮，当我单击此菜单按钮时，我只能看到sidenav的背景。如何解决此问题，或者必须编写没有棱角材料的导航面板？

图片：

关于移动人像分辨率的侧面导航

仅显示背景（以移动景观分辨率显示）

Answer 1

当显示宽度为768px或更大时，您的代码将隐藏sidenav：

<mat-sidenav
    ...
    class="sidenav"
    ...

@media screen and (min-width: 768px) {
  .sidenav {
    display: none;
  }
}

此代码在移动横向模式下可能会生效。