Angular 2和砌體網格第三方庫

Question

我想在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" 
     ], 

和工程，以及。

在應用程序，如果我在網絡瀏覽器中打開控制檯，然後輸入這段代碼：

var elem = document.querySelector('#masonry-grid'); 
var msnry = new Masonry(elem, { 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: 200 
}); 

一切工作爲好。

現在我想實現它自動工作。那麼我做了什麼？

在組件我使用

ViewChild（@ViewChild('masonryGrid') masonryGrid: ElementRef;）

，以獲得股利和替換此行純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 
}); 

一切都被編譯爲好，我沒有看到在控制檯的任何錯誤，但砌體不會被實例化，它不工作。

任何形式的幫助將不勝感激。

編輯：

它開始工作。看起來，angular-cli webpack存在問題。有時它不會自動識別更改。它說在控制檯中「沒有任何改變」。我重新啓動服務器，它開始工作。

Answer 1

沒有爲角2

停靠的砌體模塊可以發現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'} 
    ] 
} 

Answer 2

這是http://masonry.desandro.com/另一個角2+ NgMasonryGridModule模塊。

它可以在NPM找到registry

額外功能：

• 不同的預定義負載影響砌體電網項目與CSS動畫，也可以創建併網項目自己的自定義負載效應。
• 與角5

預覽支持：https://ng-masonry-grid-demo.herokuapp.com/