Угловая 2 и кладочная сетка сторонней библиотеки

Question

Я хочу использовать Masonry Grid в приложении Angular 2.

Я установил этот: 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;)

чтобы получить 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. Иногда он не распознает изменения автоматически. В консоли написано "Ничего не изменилось". Я перезапустил сервер, и он начал работать.

Answer 1

Для Angular 2 есть перенесенный модуль масонства.

Это можно найти здесь.

Вам необходимо импортировать его в свой основной модуль или в общий модуль.

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