5
私は、Packery/Masonryをコンポーネントで動作させようとしています。 Packeryはコンテナを検出していますが、imagesLoadedを使用していても内容がロードされていないことを示すゼロの高さを与えています。私は様々なライフサイクルフックを使ってみましたが、それらはすべて同じ結果を持っていますので、どこが間違っているのか分かりません。あなたが表示されますように私は私が最初に試したとき、それはこのように終わることのないループはDOMがそう変わるたびに発射されてしまったが、私が代わりにAfterViewChecked
を使用するために必要なこと、それを働いPackery/Masonryとangular2を併用する
import {BlogService} from './blog.service';
import {Blog} from './blog.model';
import {Component, ElementRef, OnInit, AfterViewInit} from '@angular/core';
import {LinkyPipe} from '../pipes/linky.pipe';
declare var Packery: any;
declare var imagesLoaded: any;
@Component({
moduleId: module.id,
selector: 'blog',
templateUrl: 'blog.component.html',
providers: [BlogService],
pipes: [LinkyPipe]
})
export class BlogComponent implements OnInit, AfterViewInit {
blogs: Blog[];
errorMessage: string;
constructor(private _blogService: BlogService, public element: ElementRef) { }
ngOnInit() {
this.getBlogs();
}
ngAfterViewInit() {
let elem = this.element.nativeElement.querySelector('.social-grid');
let pckry;
imagesLoaded(elem, function(instance) {
console.log('loaded');
pckry = new Packery(elem, {
columnWidth: '.grid-sizer',
gutter: '.gutter-sizer',
percentPosition: true,
itemSelector: '.social-card'
});
});
}
getBlogs() {
this._blogService.getPosts()
.subscribe(
blogs => this.blogs = blogs,
error => this.errorMessage = <any>error);
}
}