ngx-slick-unslick-fix 是一款前端的 npm 包，是对原先 ngx-slick-carousel 所有问题的解决方案。ngx-slick-carousel 是一个使用 Angular 封装的 Slick 轮播库，但是使用中还存在许多问题。本文将详细介绍 ngx-slick-unslick-fix 的使用方法和指导意义。
安装和基本使用
安装 ngx-slick-unslick-fix，可以使用 npm 命令行：
npm install ngx-slick-unslick-fix --save
然后在项目所在的模块中，导入依赖：
-- -------------------- ---- -------
------ - ------------------------- - ---- ------------------------
-----------
-------- -
--------------------------
--
--
--
------ ----- --------- - -为了确保 ngx-slick-carousel 不在应用程序关闭时保留引用，应该在每个 ngx-slick-carousel 实例上调用 unslick()（参考下文），否则可能会导致内存泄漏。
创建一个简单的 ngx-slick-carousel 实例：
-- -------------------- ---- -------
----------------------- ---------------- ------------------
-----
---- --------------------------------------
------
-----
---- --------------------------------------
------
-----
---- --------------------------------------
------
--------------------------- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------------
------------ ----------------------------------
---------- ----------------------------------
--
------ ----- ----------- -
------ ------- --- - -
----- -----
--------- -----
------ ----
------------- --
--------------- -
--
-解决问题
ngx-slick-unslick-fix 解决了以下 ngx-slick-carousel 问题：
在含有多个滑块的页面上无法编辑或删除条目
通过“unslick”功能将 slick 完全删除，以保留正确的高度和内存。
-- -------------------- ---- -------
------ - ---------- --------- - ---- ----------------
------ - ---------------------- - ---- ---------------------
------ - ------------------------ - ---- ------------------------
------------
--------- -----------------
------------ ----------------------------------
---------- ----------------------------------
--
------ ----- ----------- -
------------------------ - ------- ----- -- ----------- -----------------------
------ ------- --- - -
----- -----
--------- -----
------ ----
------------- --
--------------- -
--
------------------- ------------------------- ------------------------- -
-
------------------ -
-- ------------------- --- ----------------- - ------------------------- -
------------------------------------------------------------
-
-
--- -------------------- ---- -------
----------------------- ---------------- ----------- ----------------- ------------------------------------
-----
---- --------------------------------------
------
-----
---- --------------------------------------
------
-----
---- --------------------------------------
------
-------------------------Slick 确定精度越界错误
修复 slick 函数出现“根据元素的值无法确定精度”的错误。
手动操作 Slick 和获取 Slick 实例的问题
提供了 slickGoTo(i: number), slickNext(), slickPrev(), slickPause(), slickPlay(), slickAdd(html: string, index?: number, addBefore?: boolean), slickRemove(index: number, removeBefore?: boolean), slickGetSlick() 方法。
Slick 配置重置问题
通过 ngx 销毁组件并重新创建，以避免此问题。
Slick 清单变量未正确注销
此功能在 ngx-slick-carousel 上没有处理。因此，使用 ngx-slick-carousel 可能会导致未知内存使用量。
Slick 配置项缺失
该库使用了最新的 slick 配置，并添加了 ngx-slick-carousel 上缺失的配置。例如，该库添加了“swipeToSlide”选项。
总结
ngx-slick-unslick-fix 是 ngx-slick-carousel 的强大替代品，解决了许多 ngx-slick-carousel 的问题。使用 ngx-slick-unslick-fix，可以在 Angular 应用程序中轻松地构建更正常、更可靠的轮播功能。如果你刚刚开始学习 ngx-slick-carousel 或者正在升级你的 ngx-slick-carousel 应用，那么 ngx-slick-unslick-fix 将会是一个非常有用的 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005738981e8991b448e97da