gpt4 book ai didi

Angular 2和masonry grid第三方库

转载 作者:太空狗 更新时间:2023-10-29 18:20:37 27 4
gpt4 key购买 nike

我想在 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 创建 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 模块。

可以查到 here.

您需要将其导入您的主模块或共享模块。

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'}
]
}

关于Angular 2和masonry grid第三方库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42281442/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com