文章/答案/技术大牛

发布

社区首页 >问答首页 >角-cli: Shufflejs插件的使用

问角-cli: Shufflejs插件的使用
EN

Stack Overflow用户

提问于 2017-05-16 12:29:46

回答 1查看 752关注 0票数 0

由于到目前为止还没有角模块，如何将舒夫莱赫实现到一个角-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来自本教程的html部分。

我得到以下错误：

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

这里怎么了？

编辑：I成功地全局定义了该属性：

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

现在，前面的错误消失了，但现在我又得到了另一个错误：

.github.io/Shuffle/

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

angular-cli

回答 1

Stack Overflow用户

发布于 2017-05-16 14:38:56

因此，包括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
        })
    }
}

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44001531

复制

相似问题

问角-cli: Shufflejs插件的使用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角-cli: Shufflejs插件的使用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角-cli: Shufflejs插件的使用
EN