[英]Angular 2 and masonry grid third party library
我想在Angular 2应用程序中使用Masonry Grid。
我安装了这个: http : //masonry.desandro.com/
with: 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');
现在我正在努力为砌体创建typings.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'}
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.