javascript - 设置 angular2-useful-swiper 模块的问题

Question

我已按照 angular-useful-swiper 在 github 上的所有说明将此模块添加到我的 angular2 项目中。我正在使用 angular-cli!我通过 npm 安装模块到我的 node_modules

我将 SwiperModule 添加到我的 app.module.ts 中

import { SwiperModule } from '../../node_modules/angular2-useful-swiper/lib/swiper.module';

当然

.......
imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing,
    SwiperModule
  ],
......

我为滑动器创建了一个组件

import { Component, OnInit } from '@angular/core';

declare var Swiper: any;

@Component({
  selector: 'app-swiper',
  templateUrl: './swiper.component.html',
  styleUrls: ['./swiper.component.css']
})
export class SwiperComponent implements OnInit {

 config: Object = {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            spaceBetween: 30
        };

  constructor() { }

  ngOnInit() {
  }

}

该组件的 HTML:

<swiper [config]="config">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </swiper>

如果我调用 swiper 组件，我会收到以下错误。

error_handler.js:54 EXCEPTION: Uncaught (in promise): Error: Error in ./SwiperComponent class SwiperComponent - inline template:0:0 caused by: Swiper is not defined Error: Error in ./SwiperComponent class SwiperComponent - inline template:0:0 caused by: Swiper is not defined at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7204:33) at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:30450:16) at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:30515:16) at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:61293:16) at CompiledTemplate.proxyViewClass.DebugAppView.rethrowWithContext (http://localhost:4200/vendor.bundle.js:83384:23) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83357:18) at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83144:18) at CompiledTemplate.proxyViewClass.View_HomeComponent0.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:204:20) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83159:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83354:44) at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83144:18) at CompiledTemplate.proxyViewClass.View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:29:19) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83159:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83354:44) at ViewRef.detectChanges (http://localhost:4200/vendor.bundle.js:62220:20)

这对我来说毫无意义，因为自从我在 app.module.ts 中添加后，swiper 模块就在那里

我正在使用 angular-cli 来编译应用程序

这里有没有人可以给我一个提示。

该模块在我的 node_modules 中，在设置时导入模块时没有错误。我没有在我的 opion 的 index.html 中注册 swiper.js，这是不需要的，因为我通过 npm 添加了模块并在 app.module.ts 中添加了模块。如果我错了，如果有人能帮助我，我会很高兴。

Answer 1

将以下内容添加到我的 index.html文件帮我解决了

<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.js"></script>