Question

我已经按照angular-useful-swiper的github上的所有说明将这个模块添加到我的angular2项目中。我正在使用angular-cli！我通过npm将Module安装到我的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 EXCEPTION：未捕获（在承诺中）：错误：错误 ./SwiperComponent类SwiperComponent - 内联模板：0：0引起 by：Swiper未定义错误：./SwiperComponent类中的错误 SwiperComponent - 内联模板：0：0引起：Swiper未定义在ViewWrappedError.ZoneAwareError （http://localhost:4200/polyfills.bundle.js:7204:33）at ViewWrappedError.BaseError [作为构造函数] （http://localhost:4200/vendor.bundle.js:30450:16）at ViewWrappedError.WrappedError [作为构造函数] （http://localhost:4200/vendor.bundle.js:30515:16）新的 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中，在安装时导入模块时没有错误。我没有在我的opionon中的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>

Answer 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>

设置angular2-useful-swiper模块时出现问题

2 个答案: