介绍
ng2-if-media 是一个基于 Angular 2 的响应式媒体查询指令，用于在不同屏幕尺寸下，显示或隐藏特定的元素。使用 ng2-if-media 能够很方便地进行响应式设计，同时提高了网站的用户体验。
安装
可以通过 npm 进行安装，使用以下命令：
npm install ng2-if-media
安装完成后，将 ng2-if-media 模块导入到应用程序中：
-- -------------------- ---- -------
------ - ---------------- - ---- ---------------
-----------
-------- -
--------------
--------------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -使用
ng2-if
ng2-if 指令可用于在不同屏幕尺寸下，显示或隐藏特定的元素。
<element *ng2-if="'query'">...</element>
其中 'query' 是要应用的媒体查询字符串。可以使用预定义的媒体查询，也可以自定义媒体查询。
ng2-if 同样支持反转逻辑。例如，当媒体查询不匹配时，将显示特定元素：
<element *ng2-if="'query'; inverse: true">...</element>
ng2-if-not
ng2-if-not 指令与 ng2-if 相反，用于当屏幕尺寸不匹配特定媒体查询时，显示特定元素。
<element *ng2-if-not="'query'">...</element>
同样地，也支持反转逻辑：
<element *ng2-if-not="'query'; inverse: true">...</element>
预定义的媒体查询
ng2-if-media 提供了预定义的媒体查询，以方便使用。以下是其中一些预定义的媒体查询：
| 媒体查询 | 描述 |
|---|---|
| xs | 手机横向屏幕（<= 480px） |
| sm | 平板纵向屏幕（> 480px） |
| md | 平板横向屏幕（> 768px） |
| lg | 大屏幕设备（> 992px） |
| xl | 超大屏幕设备（> 1200px） |
可以将这些预定义的媒体查询用于 ng2-if 和 ng2-if-not 指令：
<div *ng2-if="'xs'">手机横向屏幕</div> <div *ng2-if="'sm'">平板纵向屏幕</div> <div *ng2-if="'md'">平板横向屏幕</div> <div *ng2-if="'lg'">大屏幕设备</div> <div *ng2-if="'xl'">超大屏幕设备</div>
自定义媒体查询
当需要使用特定的媒体查询时，也可以使用 ng2-if-media 的自定义媒体查询。自定义媒体查询可以直接在模板中定义：
<div *ng2-if="'@media (min-width: 768px) and (max-width: 992px)'">自定义媒体查询</div>
或者，在组件中定义：
-- -------------------- ---- -------
------------
--------- ---------------
--------- -
---- -------------------------------------
-
--
------ ----- ----------- -
------------ ------ - ------- ----------- --------
-可选参数
ng2-if 和 ng2-if-not 指令还可以使用可选参数，以进一步定制元素的可见性。
ng2-if-transition
ng2-if-transition 可用于添加 CSS 过渡，使元素在显示或隐藏时具备流畅的效果。
<element *ng2-if="'query'" ng2-if-transition="'opacity 0.5s ease'">...</element>
ng2-if-then
ng2-if-then 可用于在特定屏幕尺寸下显示的元素。此属性告诉 ng2-if-media 启动元素的渲染。
<element *ng2-if="'query'" ng2-if-then>...</element>
ng2-if-else
ng2-if-else 可用于在特定屏幕尺寸下隐藏的元素。当 ng2-if 不匹配时，将显示此元素。
<element *ng2-if="'query'" ng2-if-then>...</element> <element *ng2-if-else>I'm hidden on from given MediaQuery</element>
示例
以下是一个使用 ng2-if-media 指令的简单示例：
<my-component> <div *ng2-if="'@media (max-width: 768px)'">手机屏幕</div> <div *ng2-if="'@media (min-width: 769px) and (max-width: 992px)'">平板屏幕</div> <div *ng2-if="'@media (min-width: 993px)'">电脑屏幕</div> </my-component>
在这个示例中，将根据不同的屏幕尺寸，显示不同的元素。
总结
ng2-if-media 是一个非常实用的 Angular 2 指令，能够很方便地进行响应式设计。通过本文介绍，您现在已经了解了如何安装和使用 ng2-if-media，以及如何使用预定义的媒体查询和自定义媒体查询。同时，还了解了指令的可选参数和示例。希望这篇文章能够帮助您更好地理解并使用 ng2-if-media。
参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600569b481e8991b448e4e67