在前端开发中，使用侧边栏是一个常见的需求。但是在实现侧边栏功能时，有些前端开发者可能会遇到很多棘手的问题，比如动态控制侧边栏的显示和隐藏，动画效果的实现等等。本文将介绍一个 npm 包 @4geit/ngx-sidebar-service ，它提供了一些优雅的方式来解决这些问题。
什么是 @4geit/ngx-sidebar-service？
@4geit/ngx-sidebar-service 是一个 Angular 的依赖注入服务，可以方便地在应用中控制侧边栏的显示和隐藏。它提供了一些常用的控制方式，并支持自定义动画效果。在具体使用时，我们只需通过依赖注入方式将该服务注入到组件中，然后就可以方便地控制侧边栏的显示和隐藏了。
安装 @4geit/ngx-sidebar-service
要在 Angular 应用中使用 @4geit/ngx-sidebar-service ，我们需要先将其安装到项目中。可以使用 npm 安装，命令如下：
npm install --save @4geit/ngx-sidebar-service
安装完成后，我们就可以在应用中使用该服务了。
示例代码
为了了解如何使用 @4geit/ngx-sidebar-service，在这里给出一个简单的示例代码。该示例代码主要实现了两个功能，一个是通过点击按钮显示侧边栏，另一个是通过点击侧边栏内容或者背景隐藏侧边栏。具体代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- -----------------------------
------------
--------- -----------
--------- -
------- ---------------------------- ----------------
--------------------- ------------------
----------- ------------------------- ----------------------------- ----------------------------------------------------
------ ------------
------- ------- -----------
-------------
---- -------------------- --------------------------------------- ------------------------
------- -----------
------
-----------------------
--
------- -
-
------------- -
------------ ------
----------- ----------- -----
-
--------------- ------------- -
------------ --
-
--
--
--
------ ----- ------------ -
------- - -
------- ------
--------- -------
-------------------- -----
--
------------------- --------------- --------------- --
------------- -
-------------------------- --------------- ---
-
------------- -
----------------------------
-
-详细解释
在上述示例代码中，我们通过依赖注入方式将 SidebarService 服务注入到 AppComponent 组件中，并在组件中定义了一个 sidebar 对象，用来保存侧边栏的状态信息。
在模板中，我们先添加一个按钮，用来触发显示侧边栏的操作。然后定义了两个容器，独立的容器会方便使用上。第一个容器是 SidebarContainer，它只是一个普通的容器，作用是将多个 NgSidebar 组件组织到一起。第二个容器是 NgSidebar，它才是真正用来显示侧边栏的组件。在 NgSidebar 组件中，通过 [opened] 指令可以指定侧边栏的显示状态（即 true 表示显示，false 表示隐藏），[position] 指令用来指定侧边栏的位置（left 表示左侧，right 表示右侧）。还可以使用 [closeOnClickOutside] 指令来指定是否点击侧边栏内容以外区域时关闭侧边栏。
在应用中控制侧边栏的显示和隐藏，我们只需要使用 SidebarService 提供的 open 和 close 方法即可。在代码中，我们分别定义了 showSidebar 和 hideSidebar 方法，用来显示和隐藏侧边栏。在 showSidebar 方法中，我们使用 open 方法打开侧边栏，并将 sidebar 对象传递给 open 方法，以便设置侧边栏的状态信息。同样，在 hideSidebar 方法中，我们调用了 SidebarService 提供的 close 方法来关闭侧边栏。
自定义动画
在上述示例代码中，我们使用了 CSS transition 属性来实现了一个简单的动画效果。如果我们需要更加复杂或自定义的动画效果，我们可以使用 SidebarService 提供的 addAnimation 方法来自定义动画。具体代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - -------------- - ---- -----------------------------
------------
-- ---
--
------ ----- ------------ -
------------------- --------------- --------------- -
------------------------------------------ -
----- --------- ---------- -- -
-- ---------
------ --- --------------- -- -
----------------------- - --------------------
--- ---------- - -------------------------
------------------------ - ---
------------- -- -
------------------------ - -----------
----------------------- - ---
----------
-- ---
---
--
------ --------- ---------- -- -
-- ---------
------ --- --------------- -- -
----------------------- - ---
--- ---------- - -------------------------
------------------------ - ---
------------- -- -
------------------------ - -----------
----------------------- - --------------------
----------
-- ---
---
--
---
-
-在代码中，我们使用 addAnimation 方法来添加一个名为 custom 的自定义动画。该方法接受两个参数，第一个参数是动画名称，第二个参数是一个包含 open 和 close 方法的对象，用来实现打开和关闭动画效果。在实现打开动画效果的 open 方法中，我们使用 Promise 来返回一个异步操作，并在操作完成后调用 resolve 方法。在操作中，我们首先将侧边栏向左偏移 100%（从右向左移动），然后通过设置 transition 属性来启用 CSS 过渡效果，最后将侧边栏位置还原。在关闭动画效果的 close 方法中，我们实现了与打开动画相反的操作，将侧边栏向左偏移，然后再次设置 transition 和位置属性，以实现关闭动画效果。
结语
@4geit/ngx-sidebar-service 是一个非常有用的依赖注入服务，可以方便地实现侧边栏的控制，并支持自定义动画效果。在使用时，需要注意该服务是 Angular 的服务，需要使用依赖注入方式将其注入到组件中，然后使用 open 和 close 方法来控制侧边栏的显示和隐藏。需要注意的是，有些浏览器不支持 CSS transition 属性，可以通过 @4geit/ngx-sidebar-service 提供的 addAnimation 方法来实现自定义动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1281e8991b448daa7f