使用 Angular ng2-admin 隱藏移動視圖的菜單項

Question

我正在使用 angular ng2-admin 並試圖隱藏較低分辨率的菜單項。 並且菜單不會在移動視圖中關閉，而是阻止了一半內容的視圖。

當前行為：

在低分辨率下，當我們單擊鏈接或單擊菜單外部時，菜單應自行關閉。 目前，菜單在這兩種情況下都不會折疊，並且在分辨率寬度 < 1200px 時會阻止網站一半內容的視圖

預期行為：

當分辨率為 1200px 或更低時，當菜單展開時，當我們單擊菜單項或單擊菜單外時，它應該自行關閉。

Answer 1

考慮使用“斷點”api：

.ts

import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';

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

constructor(
public breakpointObserver: BreakpointObserver,
) {}

.html

<div *ngIf="isHandset$"></div>