Angular2 ile çalışmak için Paketleme/Yığın Alma

Question

Packery/Masonry bileşenini bir bileşen üzerinde çalışmaya çalışıyorum. Paket kapsayıcıyı algılıyor, ancak bu resimlere yüklenenleri kullanmama rağmen içeriğin yüklenmediğini düşündüren bir sıfırlık bir yükseklik veriyor. Çeşitli yaşam döngüsü kancalarını kullanmayı denedim ama hepsi aynı sonucu elde ettiler, bu yüzden nerede yanlış gittiğime dair biraz kaydım. Göreceğiniz gibi ben ilk çalıştığında bu şekilde hiç bitmeyen döngü DOM böylece her değiştirdiğinde ateşlenir o bitti ancak bunun yerine AfterViewChecked kullanmak için gerekli dışarı çalıştı

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

Tamam orada bir Birkaç ekstra kontrol yerine sadece bir kez ateşlenir. Bunu yapmanın doğru yolu olup olmadığından emin değil, ancak şimdilik çalışıyor.

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