保持 angular2-masonry 插件中媒体元素的原始顺序答案

【问题标题】：Keep the original order of media elements in angular2-masonry plugin保持 angular2-masonry 插件中媒体元素的原始顺序
【发布时间】：2017-11-13 05:17:41
【问题描述】：

我正在为 Angular 项目使用 angular2-masonry 插件，我需要在不更改其顺序的情况下显示媒体。 angular2-masonry 插件没有可用的选项。那么有没有办法实现呢？

谢谢。

【问题讨论】：

标签： angular masonry angular-masonry

【解决方案1】：

可以在使用useImagesLoaded添加砖块之前等待所有图像加载完毕，没有尺寸，砌体无法保持所需的排列。

添加useImagesLoaded：

将此包含在您的 .angular-cli.json 导入 src 或 index.html 中

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.1/imagesloaded.pkgd.min.js"></script>

已将 use Image 属性设置为 true：

<masonry [useImagesLoaded]="true"></masonry>

另一种选择是使用setTimeout 调用reloadItems 和layout：

一种方法是首先引用组件：

@ViewChild(AngularMasonry) private masonry: AngularMasonry;

然后处理事件：

itemsLoadHandler() {
  setTimeout(() => {
    this.masonry.reloadItems();
    this.masonry.layout();
  });
}

您还可以监听这些事件：

// Outputs
@Output() layoutComplete: EventEmitter<any[]> = new EventEmitter<any[]>();
@Output() removeComplete: EventEmitter<any[]> = new EventEmitter<any[]>();

ngOnInit() {
  this.masonry.on('layoutComplete', (items: any) => {
    this.layoutComplete.emit(items);
  });
  this.masonry.on('removeComplete', (items: any) => {
    this.removeComplete.emit(items);
  });
}

希望有帮助

【讨论】：