Verwenden von Packery mit Angular 2

Question

Ich kann nicht Packery mit Angular 2 mit angle-CLI und Typoskript 2.0 arbeiten. Ich verwende Packery 1.4.1 und die Typoskript-Definitionen für diese Version von DefinitelyTyped.

Das Problem besteht darin, dass der Packery-Verweis auf Outlayer nicht gefunden werden kann, wenn das Projekt mit ng serve ausgeführt wird.

Insbesondere die folgende Ausnahme wird aufgrund dessen, dass geworfen:

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

Unter meinen Code für das Projekt ist.

-Skripte aus Winkel cli.json:

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

ich auch die abhängigen js Dateien versucht haben, das Hinzufügen aber die ausgelöste Ausnahme ist das gleiche:

"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

Ich möchte helfen, wie Packery in Angular 2 mit oder ohne Typings (Vanilla Js wäre in Ordnung für mich) zu laufen.

Answer 1

Das Problem mit dem oben genannten war, dass ich nicht die Eigenschaft "nativeElement" des Gitters verwendet. Dies funktioniert:

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

Auch die nur in den Skripten Abschnitt der Winkel-cli benötigt Skript ist die folgende:

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

Um draggability Verwendung „npm installieren draggability --save“ hinzufügen und eine weitere hinzufügen Skript an den Skripten Abschnitt der Winkel-cli:

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

Dann als auch die Komponentenklasse aktualisieren:

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); 
     });   
    } 
}