Get Packery/Maurerarbeit mit angular2 arbeiten

Question

Ich versuche Packery/Mauerwerk an einer Komponente zu arbeiten. Packery erkennt den Container, gibt ihm jedoch eine Höhe von Null, was darauf hindeutet, dass der Inhalt nicht geladen wurde, obwohl ich imagesLoaded verwende. Ich habe versucht, verschiedene Lifecycle-Hooks zu verwenden, aber sie haben alle das gleiche Ergebnis, also ein bisschen verloren, wo ich falsch liege.

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

Ok ich es hat geklappt, dass ich brauchte AfterViewChecked stattdessen verwenden aber als ich versuchte sie zuerst es endete eine nie da diese Endung Schleife jedes Mal, wenn der DOM ausgelöst wird ändert sich so, wie Sie es sehen werden sind ein einige zusätzliche Kontrollen vorhanden, so dass es nur einmal ausgelöst wird. Ich bin mir immer noch nicht sicher, ob es der richtige Weg ist, aber es funktioniert jetzt.

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