让 Packery / Masonry 使用 angular2答案

【问题标题】：Getting Packery / Masonry to work with angular2让 Packery / Masonry 使用 angular2
【发布时间】：2016-05-11 10:06:16
【问题描述】：

我正在尝试让 Packery / Masonry 处理组件。 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);
  }
}

【问题讨论】：

标签： angular masonry packery imagesloaded

【解决方案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
      });
    });
  }
}

【讨论】：