在 Angular 2 中使用 Packery

Question

我似乎无法让Packery使用 angular-cli 和 typescript 2.0 使用 Angular 2。我正在使用 Packery 1.4.1 和来自绝对类型的该版本的打字稿定义。

问题是在使用 ng serve 运行项目时找不到对Outlayer的 Packery 引用。

特别是由于以下原因引发了以下异常：

类型错误：无法在 Object.utils.extend 处设置未定义的属性“位置”（在 webpackJsonp.82.module.exports 处评估）

下面是我的项目代码。

来自 angular-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'});
  }
}

应用程序组件.html

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

我想了解如何让 Packery 在有或没有类型的情况下在 Angular 2 中运行（香草 js 对我来说没问题）。

Answer 1

上述问题是我没有使用网格的“nativeElement”属性。这将起作用：

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

此外，Angular-cli 的脚本部分中所需的唯一脚本如下：

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

要添加可拖动性，请使用“npm install Draggability --save”并将另一个脚本添加到 angular-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 );
      });         
  }
}