简介
"angular2-viewport" 是一个 Angular2 响应式设计插件，它能让你在你的 Angular2 应用中生成不同的 HTML 片段来适应不同的 viewport。这个插件能够帮助你快速创建响应式的 Angular2 应用，减轻了部分工作量，使得你能够更加专注于你应用的业务逻辑和其他功能需要。
安装
首先，你需要在你的 Angular2 应用中安装 "angular2-viewport"。可以通过以下命令来安装：
npm install angular2-viewport
使用
在你的 Angular2 应用中，你需要用 @Component 装饰器装饰你需要响应式的 HTML 片段。然后，你需要将 @Viewport 指令与你的组件关联，让它观察并监控你组件的视口变化。下面是一个简单的示例：
示例代码
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------- - ---- --------------------
------------
--------- -----------
--------- -
---- ------------ ------------ --------- -------- ---
------ -------- ----------------
------- -- -- -------- ----------------
----------- ----- -- -- ------------- -------
------
-
--
----------- ----- ------------ -------- ---------- --------- ------ ---- --
------ ----- ------------ -
------ --------- --------
------ -------------- -------
------------- -
------------- - ------
------------------ - --
-
------ --------------------------- -------- -------------- ------- -
------------- - ----------
------------------ - --------------
-
-规则与参数
在这个示例代码中，我们使用了 “(max-width: 767px)” 作为规则，表示当视口的宽度不超过 767 像素时， @Viewport 指令会将组件的 className 设置成 'narrow'。同时，我们指定了组件的视口单位为 'px'，并在组件的样式表中定义了 '.narrow' 类的样式。
在我们的组件中，我们使用了 isNarrow 属性来表示当前视口是否被匹配，如果匹配，那么组件的 'narrow' className 将被应用。我们也在组件中使用了 viewportWidth 属性表示当前视口的宽度。
我们还定义了一个名为 onViewportChange 的函数。它会在视口匹配状态变化时调用，并将新的匹配状态和视口宽度作为参数传递进来。我们可以在该函数中为组件做一些必要的辅助工作，如更新其样式、重新与其他组件交互等等。
除了上述参数外，@Viewport 指令还接收一个可选参数 debounceTime，表示视口匹配状态的变化处理需要一定的延迟时间，以免频繁执行。默认值为 16。
结论
"angular2-viewport" 是一个非常简单易用的 Angular2 插件。它提供了方便快捷的方法来生成响应式的 HTML 片段。通过使用这个插件，你可以在轻松地创建适应不同视口的 Angular2 应用。希望我的文章对你有所帮助，谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558df81e8991b448d62f0