Angular 导航栏问题

Question

我使用 @angular/material:navigation <component-name> 安装 Schematics，以实现响应式设计。

我的 ts 看起来像：

import { Component, ElementRef, ViewChild } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss'],
})
export class NavbarComponent {

  isSmall$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Small)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );
    
  constructor(private breakpointObserver: BreakpointObserver) {}

}

我将 isHandset 更改为 isSmall。我的菜单图标在 600px 处消失，但我不希望它消失。我无法更改我的按钮，它应该保持在 0px 和 960px 之间。这可能吗？

这里有一个table，断点是怎么定义的

是否可以在一个按钮上使用2个断点，例如：

 <button 
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="(isSmall$ | async)"> 
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>

这就是我的按钮的样子，但我希望它是：

 <button 
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="(isSmall$ && isXSmall | async)"> 
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>

我添加到 ngIf *ngIf="(isSmall$ && isXSmall | async)"> ，我知道这是不可能的，但这就是我想要的。两个断点，我的菜单图标在我到达 960px 之前一直保持活动状态，之后它应该消失。 Angular 断点选项的 None 保持在 0 到 960px 之间。

如果你们能帮助我，我将不胜感激。

Answer 1

你能用 2 类而不是 if 来完成想要的行为吗？

<button 
   type="button"
   aria-label="Toggle sidenav"
   mat-icon-button
   [class.is-small]="isSmall$ | async"
   [class.is-xsmall]="isXSmall | async"
   (click)="drawer.toggle()"> 
   <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>

css 文件:

.is-small,
.is-xsmall {
   display: none

}

如果不是，您可以将 isSmall 和 isXSmall 可观察对象更改为 returns 一个数字的可观察对象，这样您就可以这样做：*ngIf="(size$ | async) < 2"

Answer 2

嗯，我的建议是使用 CSS 断点来处理布局响应。使用 Observables 来处理布局违反了“布局”和“逻辑”分离的规则。

所以尝试使用媒体查询 select 按钮并在你想隐藏它时使用 display:none。

在组件的 css 文件中放置如下内容：
`

@media (min-width: 960px) {
        Button {
            Display:none !important;
         }
    }

‘

另一方面，如果你真的想使用 observables，请尝试： ....*ngIf=“(isSmall$ | async) || (isXSmall$ |async)”

首先，仔细检查你是如何命名“isXSmall”的，因为当你命名它们以 $ 结尾时，你似乎没有写 $。然后，请记住每个 Observable 都需要使用“异步”进行管道传输。最后，你的逻辑必须是 ||因为当“isSmall”时它不能是“isXSmall”。你需要其中之一被评估为真，所以 ||是你的朋友。

编辑：似乎您没有实施可观察到的 isXSmall$。请添加以下内容：

isXSmall$：可观察 = this.breakpointObserver.observe(Breakpoints.XSmall) 。管道（地图（结果=> result.matches），分享回放() );

cdk/layout 的有效断点是：

const 断点：{ XSmall：字符串；小：字符串；介质：字符串；大：字符串；超大：字符串；听筒：字符串；平板电脑：字符串；网：字符串；手机肖像：字符串；平板电脑肖像：字符串； Web肖像：字符串；手机横向：字符串；平板电脑景观：字符串； Web横向：字符串； };

编辑3

顺便说一句，您可以在“观察”中检查两个条件。所以修改你的按钮，使 *ngIf 是

*ngIf="(isSmallOrXSmall$ | 异步)"

并将您的代码修改为：

isSmallOrXSmall$: Observable<boolean> = this.breakpointObserver.observe( [Breakpoints.XSmall, Breakpoints.Small]) .pipe( map(result => result.matches), shareReplay() );

Angular 导航栏问题

Angular Navbar Issue

navbar

angular-material

responsive

angular