Angular2 및 Masonry에서 imageLoaded를 사용하려면 어떻게해야합니까?

Question

응용 프로그램을 개발 중이며 Masonry 및 imagesLoaded에 Angular2를 사용하려고합니다. 나는 angular2-masonry를 사용할 수는 있지만 imagesLoaded를 사용하여 작업하는 방법에 대한 문서를 찾을 수없는 것 같습니다. 지금, 모든 벽돌이 겹쳐져 있습니다. 이전 앱에서 Angular2를 사용하지 않고이 구현을 완료했으며 imagesLoaded는 문제를 완벽하게 해결했습니다.

어떻게 구현하나요? 각도 2는 직접적인 DOM 조작을 매우 어렵게 만듭니다. 각도에는 이미지가로드되었는지 확인하는 방법이 있습니까? 어쩌면 이미지가 마지막으로로드 될 때만 카드를 표시하기 위해 구조 지시문을 사용할 수 있습니까?

Answer 1

나는 방금 https://www.npmjs.com/package/angular2-masonry의 지침을 따라했으며 제대로 작동합니다. 내 벽돌은 더 이상 겹쳐지지 않습니다.

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

을하고 index.html을에서 스크립트를 가져올 것을 잊지 마세요 : 사용 는을 useImagesLoaded

<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');

, 당신의 모듈은 심지어 인터넷 연결없이.