Angular 6+环境下激活Igx Carousel触摸滑动功能求助

我之前在本地搭建Ignite UI Carousel的时候也碰到过这个触摸滑动失效的问题，折腾了一会儿才找到原因，其实主要是两个关键点没做好，下面一步步来解决：

1. 安装并导入HammerJS #

Ignite UI Angular的触摸交互功能依赖HammerJS库，StackBlitz环境默认帮你配置好了，但本地项目需要手动安装和导入：

• 首先在项目根目录执行安装命令：

npm install hammerjs --save

• 然后在你的main.ts文件中导入HammerJS（如果没有这个文件，就在项目的入口文件里添加）：

import 'hammerjs';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. 显式开启Carousel的触摸手势支持 #

虽然Igx Carousel默认开启触摸支持，但显式设置属性可以确保没有被配置覆盖，修改你的app.component.html：

<div class="carousel-container">
    <igx-carousel #carousel [allowTouchGestures]="true">
        <igx-slide *ngFor="let slide of slides;">
            <div class="image-container">
                <img [src]="slide.src">
            </div>
        </igx-slide>
    </igx-carousel>
</div>

3. 验证样式是否干扰触摸事件 #

检查你的SCSS代码，确保没有设置pointer-events: none这类会阻止触摸事件的样式，从你提供的代码来看，当前的样式配置是没问题的，但如果后续修改样式后出现问题，可以优先排查这个点。

最后验证 #

完成上面两步后，重启你的Angular项目（执行ng serve），现在应该可以正常使用触摸滑动功能了。

内容的提问来源于stack exchange，提问作者Surendran Prabhakaran D