如何集成 angular2-useful-swiper答案

【问题标题】：How to integrate angular2-useful-swiper如何集成 angular2-useful-swiper
【发布时间】：2016-10-08 13:37:25
【问题描述】：

    ORIGINAL EXCEPTION: ReferenceError: Swiper is not defined
ORIGINAL STACKTRACE:
ReferenceError: Swiper is not defined
    at SwiperComponent.ngOnInit (http://localhost:3000/main.bundle.js:20818:28)
    at DebugAppView._View_Home0.detectChangesInternal (Home.ngfactory.js:8303:84)
    at DebugAppView.AppView.detectChanges (http://localhost:3000/vendor.bundle.js:57290:15)
    at DebugAppView.detectChanges (http://localhost:3000/vendor.bundle.js:57396:45)

完成所有过程后，它给了我这个错误。不明白发生了什么。此外，这里的 GitHub 存储库也有很多错误。

https://www.npmjs.com/package/angular2-useful-swiper

【问题讨论】：

有什么消息吗？我面临同样的错误。

标签： angular swiper

【解决方案1】：

为了实现它，请按照以下步骤操作（在angular2-useful-swiper 文档中也有说明）：

npm install --save angular2-useful-swiper

npm install --save swiper@3.4.2

然后将js和css添加到angular-cli.json：

"styles": [
    "styles.css",
    "../node_modules/swiper/dist/css/swiper.css"        
],
"scripts": [
    "../node_modules/swiper/dist/js/swiper.js"                
],

然后，在您的应用中的适当级别导入 SwiperModule。

例如在 app.module.ts 中：

import { NgModule }       from '@angular/core';

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

import { AppComponent }   from './app.component';
import { DemoComponent }   from './demo.component';

@NgModule({
    imports: [
        SwiperModule
    ],
    declarations: [
        AppComponent,
        DemoComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

然后，将 swiper 组件插入到组件中，创建一个滑块并添加内容：

<my-component>
   <swiper [config]="config">
    <div class="swiper-wrapper">
        <div class="swiper-slide">HERE GOES SELECTOR 1</div>
            <div class="swiper-slide">HERE GOES SELECTOR 2</div>
            <div class="swiper-slide">HERE GOES SELECTOR 3</div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </swiper>
</my-component>

在组件中设置 swiper 的配置，并将其绑定到组件配置属性，如上：

export class MyComponent implements OnInit {

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

设置组件的高度和宽度。它可以通过其名称swiper来定位。

swiper{
    height: 300px;
    width: 400px;
}

按照前面的步骤，如果你得到：

ERROR ReferenceError: Swiper 未定义

只需手动将 Swiper 3.4.2 添加到单个页面：

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

【讨论】：

我们还需要最新 ngx-useful-swiper 的 swiper 包吗？
@pranabw 刚刚发现 angular2-useful-swiper 已被弃用并重命名为 ngx-useful-swiper。如果没有真正使用它，我会说该程序与我在答案中提到的程序相同/非常相似。如果你得到一个 ReferenceError 说 Swiper 没有定义，那么是的，手动将 Swiper 添加到单个页面。

【解决方案2】：

第 1 步

将 Swiper 添加到您的单个页面

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

...

Plunker Example

【讨论】：

【解决方案3】：

安装

npm install --save angular2-useful-swiper

设置

将 Swiper 添加到您的单个页面

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

然后在你的 app.module.ts

中声明它

@NgModule({
    imports: [
        // your other imports
        SwiperModule
    ],
    declarations: [
        // your declarations
        DemoComponent
    ],
    bootstrap: [AppComponent]
})

现在应该可以工作了??

https://www.npmjs.com/package/angular2-useful-swiper

【讨论】：