让包装/砌体与angular2一起工作

Question

我正试图让包装/砌体在组件上工作。 Packery正在检测容器，但给它一个零高度，暗示即使我正在使用imagesLoaded，内容尚未加载。我已经尝试过使用各种生命周期钩子，但它们都有相同的结果，所以丢失的位置与我出错的地方相同。

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); 
    } 
} 

Answer 1

好，我的工作了，我需要使用AfterViewChecked代替然而，当我第一次尝试它结束了它永无止境的循环，因为这是发射每次DOM的变化，从而你会看到有一个几乎没有额外的检查，所以它只发射一次。仍然不确定这是否是正确的方法，但现在可行。

import {BlogService} from './blog.service'; 
import {Blog} from './blog.model'; 
import {Component, ElementRef, OnInit, AfterViewChecked} from '@angular/core'; 
import {LinkyPipe} from '../pipes/linky.pipe'; 
declare var Packery: any; 
declare var imagesLoaded: any; 
@Component({ 
    moduleId: module.id, 
    selector: 'coco-blog', 
    templateUrl: 'blog.component.html', 
    providers: [BlogService], 
    pipes: [LinkyPipe] 
}) 
export class BlogComponent implements OnInit, AfterViewChecked { 
    blogs: Blog[]; 
    errorMessage: string; 
    isGridInitialized: boolean; 
    constructor(private _blogService: BlogService, public element: ElementRef) { } 
    ngOnInit() { 
    this.getBlogs(); 
    } 
    ngAfterViewChecked() { 
    if (this.blogs && this.blogs.length > 0 && !this.isGridInitialized) this.initGrid(); 
    } 
    getBlogs() { 
    this._blogService.getPosts() 
     .subscribe(
     blogs => this.blogs = blogs, 
     error => this.errorMessage = <any>error); 
    } 
    initGrid() { 
    this.isGridInitialized = true; 
    let elem = document.querySelector('.social-grid'); 
    let pckry; 
    imagesLoaded(elem, function(instance) { 
     console.log('all images are loaded'); 
     pckry = new Packery(elem, { 
     percentPosition: true, 
     itemSelector: '.social-card', 
     gutter: 20 
     }); 
    }); 
    } 
}