html - 为什么 NavBar 在具体范围内出现和消失？

Question

我写的 navbar 工作正常，但我无法理解一种奇怪的行为。为什么当我改变点 631px 菜单的宽度时出现，在 600px 之后它消失了？反之亦然。为什么会这样？？我在媒体中找不到任何使用此范围或值的位置可能会影响此行为。

我的 HTML 代码没有任何特殊的逻辑。我在这里显示了我自己更改的部分代码。没有工具栏。

<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
disableClose="false"
fixedInViewport="non-fixed"
[ngClass] = "{hidden: (isHandset$ | async)!.matches}"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="isLargeScreen() ? 'side' : 'over'"
[opened]="!(isHandset$ | async)">   

CSS 样式

.sidenav-container {
  height: 100vh;
  background: rgb(224,234,252);
  background: linear-gradient(118deg, rgba(224,234,252,1) 0%, rgba(255,255,255,1) 100%);
}

.sidenav {
  width: 200px;
  box-shadow: 3px 0 6px rgba(0, 0, 0, 0.24);
}

.hidden {
  display: none;
}

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

::ng-deep .mat-toolbar.mat-primary{
  width: 100% !important;
  padding: 0px 0px 0px 15px ;
}

::ng-deep .mat-list-item-content {
  width: 100% !important;
  padding: 0px !important;
}

::ng-deep .mat-list-item-content a {
  width: 100% !important;
  padding: 0px 15px;
}

@media (max-width: 599px) {}
.mat-toolbar-row, .mat-toolbar-single-row {
    height: 64px; 
}

.title-description {
  margin-left: 4px;
}

#button-icon-menu {
  margin-left: 10px;
}

和ts文件

export class NavBarComponent {

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

  constructor(
    private breakpointObserver: BreakpointObserver,
    ) {}

  isLargeScreen() {
    const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (width > 720) {
        return true;
    } else {
        return false;
    }
  }  
}

Answer 1

我在您的代码中注意到的第一件事:

[ngClass] = "{hidden: (isHandset$ | async)!.matches}"

如果您已经在代码中映射到 bool 变量，为什么还要访问 matches 属性？

第二 Breakpoints.Handset 你实际上是在说以下内容:

对于 600 像素以上的所有宽度，您添加的断点返回真值。为此检查 Angular 代码:手机:'(最大宽度:599.99px)和(方向:纵向)，

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
// PascalCase is being used as Breakpoints is used like an enum.
// tslint:disable-next-line:variable-name
export const Breakpoints = {
  XSmall: '(max-width: 599.99px)',
  Small: '(min-width: 600px) and (max-width: 959.99px)',
  Medium: '(min-width: 960px) and (max-width: 1279.99px)',
  Large: '(min-width: 1280px) and (max-width: 1919.99px)',
  XLarge: '(min-width: 1920px)',

  Handset: '(max-width: 599.99px) and (orientation: portrait), ' +
           '(max-width: 959.99px) and (orientation: landscape)',
  Tablet: '(min-width: 600px) and (max-width: 839.99px) and (orientation: portrait), ' +
          '(min-width: 960px) and (max-width: 1279.99px) and (orientation: landscape)',
  Web: '(min-width: 840px) and (orientation: portrait), ' +
       '(min-width: 1280px) and (orientation: landscape)',

这就是为什么你的 ng class hidden 匹配这种情况。