angular - 使用 Angular ng2-admin 隐藏移动视图的菜单项

Question

我正在使用角度 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>