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

【问题标题】：Hide the menu items for mobile view using Angular ng2-admin使用 Angular ng2-admin 隐藏移动视图的菜单项
【发布时间】：2020-06-29 15:58:31
【问题描述】：

我正在使用 angular ng2-admin 并尝试隐藏菜单项以降低分辨率。并且菜单不会在移动视图中关闭，而是阻止了一半内容的视图。

当前行为：

在低分辨率下，当我们点击链接时，菜单应该会自行关闭，或者当我们在菜单之外单击时。目前，菜单没有在任何一种情况下都崩溃，并且挡住了一半的人的视线网站内容分辨率宽度

预期行为：

当分辨率为 1200px 或更低时，当菜单展开时，当我们单击菜单项或在菜单外单击它应该自行关闭。

【问题讨论】：

标签： angular ng2-admin

【解决方案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>

【讨论】：