设置 angular2-useful-swiper 模块的问题答案

【问题标题】：Problems by setting up the angular2-useful-swiper module设置 angular2-useful-swiper 模块的问题
【发布时间】：2017-04-05 08:19:03
【问题描述】：

我已按照 github 上 angular-useful-swiper 的所有说明将此模块添加到我的 angular2 项目中。我正在使用角度-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
  ],
......

我为 swiper 创建了一个组件

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 例外：未捕获（承诺中）：错误：错误 ./SwiperComponent 类 SwiperComponent - 内联模板：0:0 导致作者：未定义 Swiper 错误：./SwiperComponent 类中的错误 SwiperComponent - 内联模板：0:0 原因：未定义 Swiper 在 ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:7204:33) 在 ViewWrappedError.BaseError [作为构造函数] (http://localhost:4200/vendor.bundle.js:30450:16) 在 ViewWrappedError.WrappedError [作为构造函数] (http://localhost:4200/vendor.bundle.js:30515:16) 在新 ViewWrappedError (http://localhost:4200/vendor.bundle.js:61293:16) 在 CompiledTemplate.proxyViewClass.DebugAppView.rethrowWithContext (http://localhost:4200/vendor.bundle.js:83384:23) 在 CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83357:18) 在 CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83144:18) 在 CompiledTemplate.proxyViewClass.View_HomeComponent0.detectChangesInternal (/AppModule/HomeComponent/component.ngfactory.js:204:20) 在 CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83159:14) 在 CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83354:44) 在 CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:83144:18) 在 CompiledTemplate.proxyViewClass.View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:29:19) 在 CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:83159:14) 在 CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:83354:44) 在 ViewRef.detectChanges (http://localhost:4200/vendor.bundle.js:62220:20)

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

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

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

该模块在我的 node_modules 中，并且在我导入模块时设置没有错误。我没有在我的 opionon 中注册 index.html 中的 swiper.js，因为我通过 npm 添加了模块并将模块添加到 app.module.ts 中。如果我错了，如果有人能帮我一把，我会很高兴的。

【问题讨论】：

标签： javascript angular

【解决方案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>

【讨论】：

【解决方案2】：

app.module.ts:

...
import { SwiperModule } from 'angular2-useful-swiper';
...

@NgModule({
    imports: [ 
        ...
        SwiperModule
    ],
    ...
})
export class AppModule {}

swiper.component.ts 文件：

import { Component } from '@angular/core';
import { SwiperComponent } from 'angular2-useful-swiper';

@Component({
    selector: 'app-swiper',
    templateUrl: './swiper.component.html',
    styleUrls: ['./swiper.component.css']
})
export class SwiperComponent {
    public images: Array<string> = [
        'https://picsum.photos/700/250/?image=10',
        'https://picsum.photos/700/250/?image=11',
        'https://picsum.photos/700/250/?image=12',
        'https://picsum.photos/700/250/?image=13',
        'https://picsum.photos/700/250/?image=14'
    ];
    public config: Object = {
        loop: true,
        paginationClickable: true,
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        spaceBetween: 16,
        zoom: true,
    };
    @ViewChild('usefulSwiper') public usefulSwiper: SwiperComponent;
}

swiper.component.html 文件：

<section class="swiper-container">
    <swiper class="swiper" [config]="config">
        <div class="swiper-wrapper">
            <div *ngFor="let image of images" class="swiper-slide">
                <img [src]="image" alt="image">
            </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </swiper>
</section>

【讨论】：