如何使用angular-slick-carousel的slickFilter按data-test-id属性筛选轮播项

1. 确认slickConfig基础配置 #

需要先在slickConfig中预留method空对象，组件才会将slick实例方法挂载到该字段上：

$scope.slickConfig = {
  // 你的其他轮播原生配置，比如autoplay、slidesToShow等
  method: {}, // 该字段为必填项，不可省略
  // 其余自定义配置
}

2. 正确调用slickFilter完成筛选 #

slickFilter是底层jQuery Slick提供的原生方法，入参为合法的jQuery选择器。要匹配data-test-id属性包含搜索字符串的slide，使用属性包含选择器[attribute*=value]即可，完整调用代码如下：

// 先对搜索字符串做特殊字符转义，避免触发选择器语法错误
const escapedStr = searchStr.replace(/[!"#$%&'()*+,.\/:;<=>?@\[\\\]^`{|}~]/g, '\\$&')
// 传入匹配规则选择器
$scope.slickConfig.method.slickFilter(`[data-test-id*="${escapedStr}"]`)

3. 重置筛选的方法 #

如果需要取消筛选、恢复所有slide展示，调用slickUnfilter方法即可：

$scope.slickConfig.method.slickUnfilter()

注意事项 #

• 筛选方法必须在轮播组件初始化完成后调用，可通过监听slick-init事件确认初始化状态
• 筛选完成后可主动调用$scope.slickConfig.method.slickGoTo(0)回到轮播第一帧，优化用户体验

内容的提问来源于stack exchange，提问作者ofirthedev