angular-cli：Shufflejs插件的使用方法

Question

由于到目前为止还没有角度模块，如何将 Shufflejs 实现到angular-cli项目中？

这是我的组件：

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

@Component({
    moduleId: module.id,
    selector: 'proj-masonry',
    templateUrl: 'proj-masonry.component.html'
})
export class ProjMasonryComponent implements OnInit {
    ngOnInit() {
        $(document).ready(function () {
            var $grid = $('#grid'),
                $sizer = $grid.find('.shuffle__sizer');

            $grid.shuffle({
                itemSelector: '.picture-item',
                sizer: $sizer
            });
        });
    }
}

这是我的.angular-cli.json脚本文件导入：

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/shufflejs/dist/shuffle.js"
],

我的组件中的HTML来自 this tutorial 的html部分。

我收到以下错误：

jQuery.Deferred exception: $grid.shuffle is not a function TypeError: $grid.shuffle is not a function

这里有什么问题？

编辑：我设法全局定义了该属性：

let Shuffle = "shuffle" in window ? window['shuffle'] : '';

所以现在之前的错误消失了，但现在又得到了另一个错误：

。github.io/Shuffle /

编辑2：第二个错误是由于.angular-cli.json中的重复导入行

Answer 1

因此，包括Shufflejs在内的完整工作模块看起来像：

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

@Component({
    moduleId: module.id,
    selector: 'proj-masonry',
    templateUrl: 'proj-masonry.component.html'
})
export class ProjMasonryComponent implements OnInit {
    ngOnInit() {
        let Shuffle = "shuffle" in window ? window['shuffle'] : '';

        let element = document.getElementById('grid');
        let sizer = element.querySelector('.my-sizer-element');

        let shuffle = new Shuffle(element, {
            itemSelector: '.picture-item',
            sizer: sizer,
            gutterWidth: 33,
            columnWidth: 540
        })
    }
}