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

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

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

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

最佳答案

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

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

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

2nd Breakpoints.Handset您实际上是在说以下内容：

对于600px以上的所有宽度，您添加的断点将返回true。检查角度代码：
Handset: '(max-width: 599.99px) and (orientation: portrait),

/**
 * @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类与此情况匹配的原因。

关于html - 为什么NavBar在具体范围内出现和消失？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59105324/