将 Packery 与 Angular 一起使用 2
Using Packery with Angular 2
我似乎无法 Packery 使用 Angular 2 使用 angular-cli 和打字稿 2.0。
我正在使用 Packery 1.4.1 和来自 DefinitelyTyped 的那个版本的打字稿定义。
问题是当运行使用 ng 服务连接项目时,无法找到对 Outlayer 的 Packery 引用。
具体来说,会因此抛出以下异常:
TypeError: Cannot set property 'position' of undefined
at Object.utils.extend (eval at 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'});
}
}
app.component.html
<div #grid class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
我想获得有关如何在 Angular 2 中将 Packery 设置为 运行 的帮助,无论是否输入(vanilla js 对我来说都可以)。
上面的问题是我没有使用网格的"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"
]
然后更新组件class:
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 );
});
}
}
我似乎无法 Packery 使用 Angular 2 使用 angular-cli 和打字稿 2.0。 我正在使用 Packery 1.4.1 和来自 DefinitelyTyped 的那个版本的打字稿定义。
问题是当运行使用 ng 服务连接项目时,无法找到对 Outlayer 的 Packery 引用。
具体来说,会因此抛出以下异常:
TypeError: Cannot set property 'position' of undefined at Object.utils.extend (eval at 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'});
}
}
app.component.html
<div #grid class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
我想获得有关如何在 Angular 2 中将 Packery 设置为 运行 的帮助,无论是否输入(vanilla js 对我来说都可以)。
上面的问题是我没有使用网格的"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"
]
然后更新组件class:
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 );
});
}
}