Question

我正在前端使用Angular构建移动应用。

在此应用中，应构建一个由1个以上组件组成的滑块。为了更好地从视觉上表达这一点，该滑块包含3个幻灯片，每个幻灯片都是不同的组件（因此，总共3个组件）。

在测试了各种滑块之后，Ng2Carouselamos是我的选择。能够使用1个组件来实现它，而且非常简单。但是我无法使用3个所需组件来做到这一点。

如何实现？

Answer 1

设法完成使用{{3}}所需的操作。

为了实现这一目标，请执行以下步骤（在其文档中也有说明）：

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>

必须在组件中设置刷卡器的配置并将其绑定到组件的config属性，如上：

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

按照前面的步骤操作后，得到了：

错误ReferenceError：未定义刷卡器

要解决此问题，只需将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>

滑过Angular中的各个组件

1 个答案: