Angular 2和砖石网格第三方库 [英] Angular 2 and masonry grid third party library
问题描述
我想在Angular 2应用程序中使用Masonry Grid.
我安装了一个: http://masonry.desandro.com/
与:npm install masonry-layout --save
,并且我通过angular-cli.json
"scripts": [
"../node_modules/masonry-layout/dist/masonry.pkgd.min.js"
],
,它也起作用.
在应用程序中,如果我在Web浏览器中打开控制台并键入以下代码:
var elem = document.querySelector('#masonry-grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 200
});
一切正常.
现在,我想实现该功能以使其自动运行.那我做了什么?
在组件中,我正在使用
ViewChild
(@ViewChild('masonryGrid') masonryGrid: ElementRef;
)
获取div并替换了这行纯javascript行
var elem = document.querySelector('#masonry-grid');
现在,我正在努力为Masonry创建types.d.ts,而这一部分对我来说还不是很清楚.
我试图在组件顶部以这种方式声明变量.
declare var Masonry: any;
然后在ngAfterViewInit()中执行此操作
new Masonry(this.masonryGrid.nativeElement, {
// options
itemSelector: '.grid-item',
columnWidth: 200
});
所有内容也都进行了编译,我在控制台中看不到任何错误,但是Masonry没有实例化,因此无法正常工作.
任何帮助将不胜感激.
它开始起作用.看来angular-cli webpack出现了问题.有时它无法自动识别更改.它在控制台中说什么都没有改变".我重新启动服务器,它开始工作.
Angular 2有一个移植的Masonry模块.
可以在 此处找到. >
您需要将其导入到主模块或共享模块中.
import { MasonryModule } from 'angular2-masonry';
@NgModule({
imports: [
MasonryModule
]
})
示例组件如下:
@Component({
selector: 'my-component',
template: `
<masonry>
<masonry-brick class="brick" *ngFor="let brick of bricks">
{{brick.title}}</masonry-brick>
</masonry> `
})
class MyComponent {
bricks = [
{title: 'Brick 1'},
{title: 'Brick 2'},
{title: 'Brick 3'},
{title: 'Brick 4'},
{title: 'Brick 5'},
{title: 'Brick 6'}
]
}
I want to use Masonry Grid in Angular 2 application.
I installed this one: http://masonry.desandro.com/
with: npm install masonry-layout --save
and I include that via angular-cli.json
"scripts": [
"../node_modules/masonry-layout/dist/masonry.pkgd.min.js"
],
and that works as well.
In application if I open console in web browser and type this piece of code:
var elem = document.querySelector('#masonry-grid');
var msnry = new Masonry( elem, {
// options
itemSelector: '.grid-item',
columnWidth: 200
});
Everything works as well.
Now I want to achieve that to work automatically. So what I did?
In component I'm using
ViewChild
( @ViewChild('masonryGrid') masonryGrid: ElementRef;
)
to get the div and that replaces this line of pure javascript line
var elem = document.querySelector('#masonry-grid');
Now I'm struggling with creating typings.d.ts for Masonry and that part isn't yet totally clear for me.
I tried at the top of component to declare variable on this way.
declare var Masonry: any;
and then in ngAfterViewInit() to do this
new Masonry(this.masonryGrid.nativeElement, {
// options
itemSelector: '.grid-item',
columnWidth: 200
});
Everything was compiled as well and I don't see any errors in console, but Masonry is not instantiated and it doesn't work.
Any kind of help will be appreciated.
EDIT:
It started to work. It seems how there was problem with angular-cli webpack. Sometimes it doesn't recognize changes automatically. It said "Nothing changed" in console. I restarted server and it started to work.
There is a ported Masonry module for Angular 2.
It can be found here.
You need to import it into your main module, or a shared module.
import { MasonryModule } from 'angular2-masonry';
@NgModule({
imports: [
MasonryModule
]
})
A sample component looks like this:
@Component({
selector: 'my-component',
template: `
<masonry>
<masonry-brick class="brick" *ngFor="let brick of bricks">
{{brick.title}}</masonry-brick>
</masonry> `
})
class MyComponent {
bricks = [
{title: 'Brick 1'},
{title: 'Brick 2'},
{title: 'Brick 3'},
{title: 'Brick 4'},
{title: 'Brick 5'},
{title: 'Brick 6'}
]
}
这篇关于Angular 2和砖石网格第三方库的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!