angular2でphotoswipeの使い方がよくわかりません。

Question

angular2の新米です。

写真をいくつか画面に出して、そこにphotoswipeライブラリを適用したいんですが、どうすればいいか困っています。

二つ案を考えて試したんですが、うまくいかないんです。

htmlに直接<script>にphotoswipeセット用のJavaScriptファイルを見るようにして、その下に<script>タグをもう一個設けて、initPhotoSwipeFromDOM(".my-gallery");を実行する。
typescriptでinitPhotoSwipeFromDOMを実行する。(not find initPhotoSwipeFromDOM errorなどでビルド失敗)
angular-cliで開発しています。(angular-cli.jsonにはphotoswipeライブラリは記入しました。)
普通のhtmlとcomponentファイルを構成し、その中に何とかphotoswipeを入れようとしていますが、完全に参りました。

ご名案よろしくお願いいたします。

Comments

[kunai]

なんか同じように見える質問が複数ありますので、削除申請しておいた方がよいかと思います

Answer 1

photoswipeのことはわかりませんが、基本的にjavascriptコードはcomponent の中に入れます

以下のコードではjqueryを使用していますが、ngOnInit()の中でjqueryを初期化して起動することができるようにします

始めたばかりだったら、angularのlife cycle hookとか調べる理解が深まるのでオススメです

ちなみにngOnInitではロードの時間とかの関係でsetTimeoutをよく使います
ngOnInitの中でも動かなかったらこちらも試すといいですよー

import {Component, OnInit} from "@angular/core";

declare let jQuery: any;

@Component({
    selector: 'app-post',
    templateUrl: './post.component.html',
    styleUrls: ['./post.component.scss']
})
export class PostComponent implements OnInit {

    constructor() {
    }

    ngOnInit() {
     // いつ発火させるかわかんないですけど、最初から動かせるようにしておくならここに入れとけばいい
     this.setTime();
    }

    private setTime() {
        setTimeout(() => {
            jQuery("#owl-related-posts").owlCarousel({
                autoPlay: 5000,
                stopOnHover: true,
                navigation: true,
                pagination: true,
                rewindNav: true,
                items: 2,
                itemsDesktopSmall: [1199, 2],
                itemsTablet: [977, 2],
                navigationText: ["<i class='icon-left-open-mini'></i>", "<i class='icon-right-open-mini'></i>"]
            });
        }, 100)
    }
}