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 中，并且在设置时导入该模块时没有错误。 我没有在我的意见中的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>