使用Packery和Angular 2

我似乎無法得到Packery與Angular 2一起使用angular-cli和typescript 2.0。我正在使用Packery 1.4.1以及來自DefinitelyTyped的該版本的打字稿定義。使用Packery和Angular 2

的問題是，正在運行的項目時NG服務Packery參考Outlayer無法找到。

具體有以下拋出異常原因爲：

TypeError: Cannot set property 'position' of undefined at Object.utils.extend (eval at webpackJsonp.82.module.exports

下面是我的項目代碼。

從角cli.json

腳本部分：

"scripts": [ 
     "../node_modules/packery/dist/packery.pkgd.js"],

我還試圖加入從屬JS文件，但引發的異常是相同的：

"scripts": [ 
     "../node_modules/packery/dist/packery.pkgd.js", 
     "../node_modules/get-size/get-size.js", 
     "../node_modules/outlayer/outlayer.js", 
     "../node_modules/ev-emitter/ev-emitter.js", 
     "../node_modules/fizzy-ui-utils/utils.js", 
     "../node_modules/desandro-matches-selector/matches-selector.js" 
     ],

app.component.ts：

import { Component, ViewChild, AfterViewInit } from '@angular/core'; 
declare var Packery: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements AfterViewInit 
{ 
    @ViewChild('grid') grid; 

    private pckry: any; 
    constructor() {} 

    ngAfterViewInit(){ 
    this.pckry = new Packery(this.grid, { 
     itemSelector: '.grid-item'}); 
    } 
}

app.component.html

<div #grid class="grid"> 
    <div class="grid-item"></div> 
    <div class="grid-item"></div> 
</div>

我想幫助如何讓Packery在Angular 2中運行，無論是否使用類型（vanilla js都可以）。

來源

2017-02-09 Mikael Kristensen

上述問題是我沒有使用網格的「nativeElement」屬性。這將工作：

var packery = new Packery(this.grid.nativeElement, { 
itemSelector: '.grid-item', columnWidth: 100 });

此外，在角CLI的腳本節唯一需要的腳本如下：

"scripts": [ 
     "../node_modules/packery/dist/packery.pkgd.js"   
     ]

要添加draggability使用「故宮安裝draggability --save」並添加另一個腳本角-CLI的腳本部分：

"scripts": [ 
     "../node_modules/packery/dist/packery.pkgd.min.js", 
     "../node_modules/draggabilly/dist/draggabilly.pkgd.min.js"   
     ]

然後，更新組件類，以及：

import { Component, ViewChild, AfterViewInit } from '@angular/core'; 
declare var Packery: any; 
declare var Draggabilly: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements AfterViewInit 
{  
    @ViewChild('grid') grid; 

    constructor() {} 

    ngAfterViewInit(){ 
     var packery = new Packery(this.grid.nativeElement, { 
     itemSelector: '.grid-item', columnWidth: 100 }); 

     packery.getItemElements().forEach(function(itemElem) { 
     var draggie = new Draggabilly(itemElem); 
     packery.bindDraggabillyEvents(draggie); 
     });   
    } 
}

來源

2017-02-15 07:37:33

你有沒有需要刷新網格？如果是這樣，你是如何做到的？ –

@JeremyThomas不幸的是，我還沒有能夠刷新網格，而不重新設置每個瓦片的位置。我實際上正在考慮在拖動它們後更新後端的位置，以便在更新後保持在該位置。 –

我實際上放棄了讓Packery在沒有Angular問題的情況下工作。主要問題是使用來自後端的新數據更新網格 - 它似乎從來沒有正常工作。另外使用一個沒有直接支持Angular的網格也沒什麼意義，因爲Angular集成的問題太多了。因此，我使用Dragula重寫了網格：https：//github.com/valor-software/ng2-dragula Dragula只是「工作」我的用例，因爲它更好地控制列和（固定）定位項目一般。 –

使用Packery和Angular 2

回答

相關問題