Angular Material指令隐藏小/移动显示器上的元素

Question

是否采用了有棱角的物质方式＆＃39;使用某种指令隐藏小/移动显示器上的元素？使用Angular和Angular材料已经有一段时间了，我觉得这应该很简单，但我还没找到它。我知道ng-show / ng-hide指令，但我不知道我是否可以编写一个以某种方式检查当前显示大小的表达式。

我是否只需要回归CSS中的旧媒体查询？

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

Answer 1

您可以创建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 2

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

Angular Material Design - Change flex value with screen size

Answer 3

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

如果通过JavaScript隐藏内容（可能更多ng-if样式而不是ng-show样式），我建议只执行此 ，这样可以跳过处理JavaScript中不需要和繁重的内容移动浏览器。如果它只是一个视觉效果，请使用CSS。这是这项工作的正确工具。

Answer 4

使用hide-sm css类。此类由角度材料

提供

Answer 5

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