你如何让 imageLoaded 与 Angular2 和 Masonry 一起工作？答案

【问题标题】：How do you get imageLoaded to work with Angular2 and Masonry?你如何让 imageLoaded 与 Angular2 和 Masonry 一起工作？
【发布时间】：2016-08-28 02:57:32
【问题描述】：

我正在开发一个应用程序并尝试将 Angular2 与 Masonry 和 imagesLoaded 一起使用。我得到了 angular2-masonry 的工作，但似乎找不到任何关于如何让 imagesLoaded 使用它的文档。现在，我所有的积木都重叠了。我在以前的应用程序中完成了这个没有 Angular2 的实现，imagesLoaded 完美地解决了这个问题。

我将如何实现这一点？我知道 angular2 非常不鼓励直接的 DOM 操作。角度是否有办法检查图像是否已加载？也许我可以使用结构指令仅在图像最终加载时显示卡片？

【问题讨论】：

标签： image dom web-applications angular masonry

【解决方案1】：

我刚刚按照https://www.npmjs.com/package/angular2-masonry 中的说明进行操作，效果很好。我的砖不再重叠。使用 useImagesLoaded：

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

别忘了在你的 index.html 中导入脚本：

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

【讨论】：

【解决方案2】：

我不推荐这种实现方式。如果用户没有互联网连接怎么办？模块会抛出错误。

我推荐的实现方式：

npm install imagesloaded
在您的打字稿文件中导入imagesloaded 模块，如下所示：
1. window['imagesLoaded'] = require('imagesloaded');

您可以这样确定，即使没有互联网连接，您的模块也可以。

【讨论】：

我应该在哪个 ts 文件中添加这个 window['imagesLoaded'] = require('imagesloaded');