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

Question

是否存在使用某种指令隐藏小/移动显示器上的元素的"角度材料方式"？使用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 - 根据屏幕尺寸更改弹性值