关键词：
【中文标题】Angular Material 指令在小型/移动显示器上隐藏元素【英文标题】：Angular Material directive to hide element on small/mobile display 【发布时间】：2016-06-06 00:48:42 【问题描述】：是否有使用某种指令在小型/移动显示器上隐藏元素的“角度材质方式”？已经使用 Angular 和 Angular Material 一段时间了，我认为这应该很简单，但我只是没有找到它。我知道 ng-show / ng-hide 指令，但我不知道我是否可以编写一个以某种方式检查当前显示大小的表达式。
我是否只需要退回到 CSS 中的旧媒体查询？
编辑 - 忘记在我的原始帖子中包含对 Angular Material 的引用...哎呀！
【问题讨论】：
不使用更适合的 CSS 是否有特殊原因？ 除非你沿着 JS 的路径去匹配用户代理字符串，否则我会使用 CSS 查询。 你可以使用ng-show。
@Matti，不是一个强有力的理由——只是 Angular 提供了很多开箱即用的样式，因此尝试在实际情况下使用它似乎是合理的，而不是编写我自己的 CSS 规则。我认为这将是 Angular 所涵盖的情况。
“角度方式”的另一种选择是使用 Angular Material 作为 UI 框架 material.angularjs.org/latest/layout/options 但这对于一个简单的任务可能有点矫枉过正
【参考方案1】：
使用 hide-sm css 类。这个类是由角材料提供的
【讨论】：
【参考方案2】：https://material.angularjs.org/latest/layout/introduction 使用隐藏和显示选项取决于断点，例如 hide-md、hide-lg
Angular Material Design - Change flex value with screen size
【讨论】：
完美，谢谢...不知何故错过了该页面 - 可能仍在查看旧版本。【参考方案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>
【讨论】：
聪明的把戏，@georgeawg。我最终使用 max-width: 320px DIV 和 max-width: 766px DIV 来隐藏/显示移动设备上特定类型的触摸屏按钮。谢谢！【参考方案4】：我认为最好的方法是使用组件方法并将指令的 js + html + scss 保存在一个文件夹中。使用 scss（或 less 或 sass）来声明您的 css 样式。这样做您可以在指令的 scss 中创建媒体查询，然后在指令的 html 中使用它。然后将每个指令的 scss 部分收集到一个文件中。因此，您将关注点分开。 js和html中的逻辑和表示。让浏览器根据屏幕大小决定是否显示你的指令。
【讨论】：
【参考方案5】：现代浏览器支持matchMedia 函数，可让您从 JavaScript 进行媒体查询。您可以制作一个使用它的自定义指令。
我建议仅在通过 JavaScript 隐藏内容（可能更多 ng-if 样式而不是 ng-show 样式）允许您在移动浏览器上跳过处理 JavaScript 中不需要的和繁重的内容时这样做。如果它只是一个视觉的东西，使用 CSS。这是完成这项工作的正确工具。
【讨论】：
Angular Material：弹出窗口：允许窗口在前后之间移动
】AngularMaterial：弹出窗口：允许窗口在前后之间移动【英文标题】：AngularMaterial:PopupWindows:AllowWindowstoGoBetweenFrontandBack【发布时间】：2020-10-2915:09:48【问题描述】：我们有1)材质对话框组件打开2)另一个材质对话框组件，当用户按... 查看详情
在 Angular Material CDK 拖放中，如何防止项目随着元素移动而自动重新排列？
】在AngularMaterialCDK拖放中，如何防止项目随着元素移动而自动重新排列？【英文标题】：InAngularMaterialCDKDragDrop,HowtoPreventItemsfromAutomaticallyRearrangingasanElementMoves?【发布时间】：2019-10-2306:05:51【问题描述】：提前致谢。问题来了：... 查看详情
我可以在 Angular / Angular Material 中以编程方式移动 mat-horizontal-stepper 的步骤吗
】我可以在Angular/AngularMaterial中以编程方式移动mat-horizontal-stepper的步骤吗【英文标题】：CanIprogrammaticallymovethestepsofamat-horizontal-stepperinAngular/AngularMaterial【发布时间】：2018-03-1004:51:36【问题描述】：我有一个关于AngularMate... 查看详情
Angular 2 Material Design 组件是不是支持布局指令？
】Angular2MaterialDesign组件是不是支持布局指令？【英文标题】：AreLayoutDirectivessupportedbyAngular2MaterialDesignComponents?Angular2MaterialDesign组件是否支持布局指令？【发布时间】：2016-09-1116:53:47【问题描述】：我正在尝试使用Angular2MaterialDes... 查看详情
如何让 Angular Material Design 的 <md-card> 指令在 IE 中正确缩放为图像？
】如何让AngularMaterialDesign的<md-card>指令在IE中正确缩放为图像？【英文标题】：HowtogetAngularMaterialDesign\'s<md-card>directivetoscaletoimageproperlyinIE?【发布时间】：2015-01-2319:40:14【问题描述】：我已经在material.angularjs.org网站上以p... 查看详情
如何向 Angular Material datepicker 的所有实例添加指令？
】如何向AngularMaterialdatepicker的所有实例添加指令？【英文标题】：HowcanIaddadirectivetoallinstancesofAngularMaterialdatepicker?【发布时间】：2021-04-2220:10:48【问题描述】：我创建了一个自定义指令，用于检查角度材料日期选择器(withhelpofhere... 查看详情
Angular 2 routerlink 在 Material 2 Toolbar 中不可点击
】Angular2routerlink在Material2Toolbar中不可点击【英文标题】：Angular2routerlinknotclickableinMaterial2Toolbar【发布时间】：2017-04-2116:45:16【问题描述】：routerLink指令在Material2的md-toolbar组件中无效。toolbar.component.html：<md-toolbarcolor="primary"& 查看详情
未捕获的错误：模块“MyMaterialModule”导入的意外指令“angular-material”。请添加 @NgModule 注释。角 5
】未捕获的错误：模块“MyMaterialModule”导入的意外指令“angular-material”。请添加@NgModule注释。角5【英文标题】：UncaughtError:Unexpecteddirective\'angular-material\'importedbythemodule\'MyMaterialModule\'.Pleaseadda@NgModuleannotation.angular5【发布时间】... 查看详情
如何将给定的指令值应用于 Angular Material 中的多个标签？
】如何将给定的指令值应用于AngularMaterial中的多个标签？【英文标题】：HowtoapplyagivendirectivevaluetomultipletagsinAngularMaterial?【发布时间】：2021-07-1114:08:56【问题描述】：我最近开始学习Angular和Material，在我的项目中我意识到我必须... 查看详情
自定义指令可以使用 Angular Material 为输入设置占位符吗？
】自定义指令可以使用AngularMaterial为输入设置占位符吗？【英文标题】：CanacustomdirectivesettheplaceholderforaninputusingAngularMaterial?【发布时间】：2017-10-2512:32:23【问题描述】：考虑一下我的html：<md-input-container><inputmdInputmyCustomDi... 查看详情
iOS Safari（移动）和 Angular Material UI：专注于输入字段时不需要的闪烁文本
】iOSSafari（移动）和AngularMaterialUI：专注于输入字段时不需要的闪烁文本【英文标题】：iOSSafari(Mobile)andAngularMaterialUI:unwantedblinkytextwhenfocusingontheinputfield【发布时间】：2020-07-3018:59:36【问题描述】：在文本字段之间切换焦点时，iO... 查看详情
如何阻止用户移动到下一步，直到使用 Angular Material Stepper（Angular 4）完成当前步骤
】如何阻止用户移动到下一步，直到使用AngularMaterialStepper（Angular4）完成当前步骤【英文标题】：HowtostopusermovingtonextstepuntilfinishthecurrentstepusingAngularMaterialStepper(Angular4)【发布时间】：2018-04-2113:24:22【问题描述】：我正在使用Angul... 查看详情
Angular Material：如何将 floatPlaceholder 设置为从不
】AngularMaterial：如何将floatPlaceholder设置为从不【英文标题】：AngularMaterial:howtosetfloatPlaceholdertonever【发布时间】：2018-01-0822:58:08【问题描述】：库：Angular材质(material2)我想使用MdInputContainer的floatPlaceholder指令，以便占位符/提示永... 查看详情
离子指令与 Ionic 框架的 Angular 材料指令
...ic框架的Angular材料指令【英文标题】：IonicdirectivesVSAngularmaterialdirectiveswithIonicFramework【发布时间】：2015-05-0903:10:31【问题描述】：我想在材料设计中使用ionic。我被困在使用带有自定义CSS的离子指令和angular-material我已经读到使用... 查看详情
如何通过 Flex-Layout 设置 Angular Material Footer
】如何通过Flex-Layout设置AngularMaterialFooter【英文标题】：HowsetupAngularMaterialFooterviaFlex-Layout【发布时间】：2019-05-2201:34:43【问题描述】：如何在我的应用程序中设置页脚（我使用AngularMaterial），以便它：如果内容高度小于视口，则... 查看详情
无法导入“@angular/material”模块
】无法导入“@angular/material”模块【英文标题】：Notabletoimport"@angular/material"module【发布时间】：2020-05-2506:34:40【问题描述】：我对堆栈完全陌生，我在使用Angular的材料模块时遇到了一些问题。我正在尝试在我的代码中导... 查看详情
波纹效果未显示在角度应用程序的按钮中 - Angular-Material
】波纹效果未显示在角度应用程序的按钮中-Angular-Material【英文标题】：Rippleeffectisnotdisplayinginbuttoninangularapp-Angular-Material【发布时间】：2019-05-1117:32:35【问题描述】：https://material.angular.io/components/button/overview我正在使用这个angula... 查看详情
Angular.js 和 Fabric.js：一旦代码移动到 Angular 指令，Fabric 画布就会改变行为
】Angular.js和Fabric.js：一旦代码移动到Angular指令，Fabric画布就会改变行为【英文标题】：Angular.jsandFabric.js:FabriccanvaschangesbehavioroncecodeismovedtoaAngularDirective【发布时间】：2013-09-1204:30:18【问题描述】：我有一个简单的AngularJS/FabricJs... 查看详情