角度2のパッカーを使用する

Question

angularcliとtypescript 2.0を使用して、角度2で動作するPackeryを角度2で使用することはできません。 私はPackery 1.4.1とそのバージョンのtypescript定義をDefinitelyTypedから使用しています。

ng serveでプロジェクトを実行しているときに、OutlayerへのPackeryの参照が見つからないという問題があります。

は、具体的に以下の例外が原因それにスローされます。

以下

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> 

私は、パッカーを入力の有無にかかわらず実行する方法について助けが必要です（バニラjsは私にとっては大丈夫でしょう）。

Answer 1

上記の問題は、グリッドの「nativeElement」プロパティを使用していないことでした。これは動作します：

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

にも従っている角度-CLIのスクリプトセクションに必要なスクリプトのみ：

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

draggabilityの使用を追加するには、「NPM 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); 
     });   
    } 
}