在Angular 8中执行滑动

Question

我正在尝试在Angular 8应用程序https://swiperjs.com/get-started/中实现Swiper。

我已经在我的资产文件夹中创建了一个javascript文件，并将其包含在我的angular.json中。

还我在app.module.ts中包括了Swiper并运行了命令npm install @types/swiper。

但是，我得到了错误：

[ts] Module '"../node_modules/@types/swiper/index has no exported member 'Swiper'

明显的时候。我不确定我要去哪里哪里。

Answer 1

我们在Angular应用程序中使用Swiper。

我们如何整合它：有一个专门针对Angular的npm软件包：https://www.npmjs.com/package/ngx-swiper-wrapper

所以您基本上只需要安装软件包：

npm i ngx-swiper-wrapper

然后，导入模块（我们将其放入SharedModule并导出，以便可以从任何地方访问它：

imports: [
    // more imports here
    SwiperModule
]

然后您可以像下面这样在组件中使用它：

<swiper fxFlex="auto" [config]="config" (indexChange)="onIndexChange($event)">
    <div *ngFor="let step of something; let index = index" class="swiper-slide cursor-pointer">
        <div fxLayout="column" fxLayoutAlign="center center" fxFlexFill class="mx-2">
            <!-- Your content goes here -->
        </div>
    </div>
</swiper>

无需在angular.json文件中包含任何样式。它们都随您导入的模块一起提供。