AngularでSwiperを利用したコンポーネントを作成する

Angularにスライダーを作成するため、Swiper(http://idangero.us/swiper/) を導入しようと思います。
ライブラリを使用しても良いのですが、スターの多いライブラリもなく、そもそもあまり複雑なライブラリでもないので、自作のコンポーネントを作成することとします。

1.インストール

ライブラリをインストールするだけでOK。
npm install --save swiper

2.コンポーネントの作成

まずは、swiperのラッパーとなるコンポーネントを作ります。
Swiperのオプションは、デフォルトでも呼び出し元でも設定できるようにしています。

swiper.component.ts

import { Injectable, Inject, Component, ElementRef, Host, Input } from '@angular/core';
import Swiper from 'swiper';

@Injectable()
@Component({
  selector: 'swiper-container',
  template:`
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <ng-content></ng-content>
      </div>
      <div class="swiper-pagination"></div>
    </div>`
})
export class SwiperContainer {
  @Input() public options: any;
  public swiper: any;

  constructor(@Inject(ElementRef) private elementRef: ElementRef) {
  }

  public ngOnInit() {
    let options = this.setDefaultOptions({
    }, this.options);

    const nativeElement = this.elementRef.nativeElement;
    this.swiper = new Swiper(nativeElement.children[0], this.options);
  }

  public update() {
    setTimeout(() => {
      this.swiper.update()
    });
  }

  private setDefaultOptions(dest: any, ...args: any[]) {
    for (let i = arguments.length - 1; i >= 1; i--) {
      let source = arguments[i] || {};
      for (let key in source) {
        if (source.hasOwnProperty(key) && !dest.hasOwnProperty(key)) {
          dest[key] = source[key];
        }
      }
    }
    return dest;
  }
}

次に、スライド部分のコンポーネントです。

swiper.component.ts

@Injectable()
@Component({
  selector: 'swiper-slide',
  template: '<div><ng-content></ng-content></div>'
})
export class SwiperSlide {
  private ele: HTMLElement;

  constructor(
    @Inject(ElementRef) elementRef: ElementRef,
    @Host() @Inject(SwiperContainer) swiper: SwiperContainer
  ) {
    this.ele = elementRef.nativeElement;
    this.ele.classList.add('swiper-slide');

    swiper.update();
  }
}

3.コンポーネントを呼び出す

作成したコンポーネントをNgModuleに追加し、以下のように呼び出せばSwiperを使用したスライダーの完成です。

home.component.ts

import { Component, ViewChild } from '@angular/core';

// shared
import { SwiperContainer } from '../shared/components/swiper/swiper.component';

@Component({
  template: `
    <swiper-container [options]="swipeOptions" #homeSlide>
    <swiper-slide>
      slide1
    </swiper-slide>
    <swiper-slide>
      slide2
    </swiper-slide>
  </swiper-container>
  `

})
export class HomeComponent {
  @ViewChild('homeSlide') public homeSlide: SwiperContainer;
  public swipeOptions = {
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets'
    },
  };

  constructor() {
  }

  goToNextPage() {
    this.homeSlide.swiper.slideNext();
  }
}

---

<参考>
参考にしたブログが見当たらなくなってしまったので、見つけ次第記載します。。