Angular Material 指令隐藏 small/mobile 显示上的元素

Question

是否有 'angular material way' 可以使用某种指令隐藏 small/mobile 显示器上的元素？使用 Angular 和 Angular Material 一段时间后，我认为这应该很简单，但我就是找不到。我知道 ng-show / ng-hide 指令，但我不知道我是否可以编写一个表达式来以某种方式检查当前显示大小。

我是否只需要回退到 CSS 中良好的旧媒体查询？

编辑 - 忘记在我原来的 post 中包含对 Angular Material 的引用...哎呀！

Answer 1

现代浏览器支持 matchMedia 功能，可让您从 JavaScript 进行媒体查询。您可以制作一个使用它的自定义指令。

如果通过 JavaScript 隐藏东西（可能更多 ng-if 风格而不是 ng-show 风格），我建议只这样做允许你在移动浏览器上跳过 JavaScript 中不需要和繁重的处理。如果只是视觉上的东西，就用CSS。这是完成这项工作的正确工具。

Answer 2

我认为最好的方法是使用组件方法并将指令的 js + html + scss 保存在一个文件夹中。使用 scss（或更少或 sass）来声明您的 css 样式。这样做你可以在指令的 scss 中创建媒体查询，然后在指令的 html 中使用它。然后您将每个指令的 scss 部分收集在一个文件中。所以你分开你的关注点。 js 和 html 中的逻辑和表示。并让浏览器根据屏幕大小决定是否显示您的指令。

Answer 3

您可以创建一个 matchMedia 过滤器。

app.filter("matchMedia", function($window) {
    return function matchMedia (mediaQueryString) {
        return $window.matchMedia(mediaQueryString).matches;
    }
});

然后在指令中使用它：

<div ng-if="'(min-width: 400px)' | matchMedia">
    <h1>The viewport is at least 400 pixels wide</h1>
</div>

Answer 4

https://material.angularjs.org/latest/layout/introduction 使用隐藏和显示选项取决于断点，例如 hide-md、hide-lg

Answer 5

使用隐藏-sm css class。此 class 由 angular material

提供

Answer 6

对于移动设备 (max-widht:599px) 在此使用 fxHide.xs 元素.
对于标签设备 (max-widht:959px) 使用“fxHide.sm”

示例：

<h2 fxHide.xs> Hide this h2 element in mobile device </h2>

Angular Material 指令隐藏 small/mobile 显示上的元素

Angular Material directive to hide element on small/mobile display

css

angularjs

angular-material