你如何使用imageLoaded与Angular2和Masonry一起工作？

Question

我正在开发一个应用程序，并尝试使用Angular2与Masonry和imagesLoaded。我使用angular2-masonry工作，但似乎无法找到有关如何使用imageLoaded来处理它的任何文档。现在，我的所有砖块都重叠了。我在之前的应用程序中没有使用Angular2就完成了这个实现，imagesLoaded完美地解决了这个问题。

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

Answer 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>

Answer 2

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

我建议的实施：

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

这就是你可以确定的，你的模块甚至没有互联网连接。