angular - 侧边导航无法正常工作 |棱 Angular Material | Angular 7

Question

我有一个用棱 Angular Material 制作的导航组件

//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;
}

//COMPONENT HTML FILE

<mat-sidenav-container class="sidenav-container">
	<mat-sidenav
		#drawer
		[ngClass]="{ hidden: !(isHandset$ | async) }"
		class="sidenav"
		fixedInViewport="false"
		[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
		[mode]="(isHandset$ | async) ? 'over' : 'side'"
		[opened]="!(isHandset$ | async)"
	>
		<mat-toolbar>Navigation</mat-toolbar>
		<mat-nav-list>
			<a
				*ngFor="let navItem of navItems"
				routerLinkActive="active"
				mat-list-item
				routerLink="{{ navItem.path }}"
				>{{ navItem.text }}</a
			>
			<div *ngIf="!isAuthorized; else loggedIn">
				<a mat-list-item (click)="loginDialog()">Login</a>
				<a mat-list-item (click)="joinDialog()">Join</a>
			</div>
			<ng-template #loggedIn>
				<a mat-list-item href="#">Geebrox</a>
			</ng-template>
		</mat-nav-list>
	</mat-sidenav>
	<mat-sidenav-content>
		<mat-toolbar class="nav-header">
			<mat-toolbar-row [ngClass]="{ 'nav-expand': navExpand }">
				<img
					routerLink="/"
					class="logo-default"
					src="./assets/img/header/nav/nav-logo-default.jpg"
					alt="Honadon"
				/>
				<mat-chip-list *ngIf="!(isHandset$ | async)">
					<a
						*ngFor="let navItem of navItems"
						routerLinkActive="active"
						mat-button
						routerLink="{{ navItem.path }}"
						>{{ navItem.text }}</a
					>
				</mat-chip-list>
				<span class="spacer"></span>
				<mat-chip-list *ngIf="!isAuthorized && !(isHandset$ | async)">
					<mat-chip class="nav-button" (click)="loginDialog()">Login</mat-chip>
					<span class="divider">or</span>
					<mat-chip class="nav-button" (click)="joinDialog()">Join</mat-chip>
				</mat-chip-list>
				<mat-chip-list *ngIf="isAuthorized && !(isHandset$ | async)">
					<mat-chip><a href="#">sample_user</a></mat-chip>
				</mat-chip-list>
				<button
					type="button"
					aria-label="Toggle sidenav"
					mat-icon-button
					(click)="drawer.toggle()"
					*ngIf="(isHandset$ | async)"
				>
					<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
				</button>
			</mat-toolbar-row>
		</mat-toolbar>
		<ng-content></ng-content>
	</mat-sidenav-content>
</mat-sidenav-container>

它有效，但它在移动横向分辨率(旋转屏幕)上有一个错误，sidenav 菜单按钮出现，当我单击此菜单按钮时，我只能看到 sidenav 的背景。我该如何解决这个问题，或者我必须自己编写没有 Angular Material 的导航面板？

图片:

移动纵向分辨率的侧边导航

仅出现背景(在移动横向分辨率上)

Answer 1

当显示宽度为 768 像素或更大时，您的代码会隐藏 sidenav:

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

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

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