Angular2とMasonryでimageLoadedを使うにはどうすればよいですか？

Question

私はアプリケーションを開発中で、Angular2をMasonryとimagesLoadedで使用しようとしています。私はangle2-masonryを動作させましたが、imagesLoadedをどのように動作させるかについてのドキュメントを見つけることはできませんでした。今、私のレンガはすべて重なっています。私は以前のアプリで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. インポートこのようなあなたのtypescriptファイル内imagesloadedモジュール：あなたは確認することができます方法です
   1. window['imagesLoaded'] = require('imagesloaded');

、あなたのモジュールはインターネットに接続しなくても。