时间戳

首页 > 解决方案 > 将 ngx-image-cropper 与 ngx-bootstrap-modal 一起使用时 loadImageFailed() 触发错误

javascript - 将 ngx-image-cropper 与 ngx-bootstrap-modal 一起使用时 loadImageFailed() 触发错误

问题描述

在打开 ngx-bootstrap-modal 以加载 ngx-image-cropper 时，请注意一些间歇性加载失败。做了一些尝试和错误，我注意到只要我在 loadImageFailed() 触发之前打开模式。裁剪器将加载，一切似乎都工作正常。是否与不渲染到 DOM 有关？

我找不到它的原因，还是我错过了什么？

希望能对此有所了解。

提前致谢。

以下是模态的外观：

<!-- EDIT MODAL -->
<article bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
    aria-labelledby="dialog-sizes-name1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form (ngSubmit)="instructorService.updateCover(instructor.id)">
                <section class="modal-header">
                    <h4 id="dialog-sizes-name1" class="modal-title pull-left">EDIT BANNER</h4>
                    <button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </section>
                <section class="modal-body">
                    <cropper></cropper>
                </section>
                <section class="modal-footer d-flex bd-highlight">
                    <div class="mr-auto p-2 bd-highlight">
                        <input class="overflow-x" type="file" (change)="onSelectFile($event)" hidden #browser>
                        <button type="button" class="btn btn-pri" (click)="browser.click()"><b>BROWSE</b></button>
                    </div>
                    <div class="p-2 bd-highlight">
                        <button type="button" class="btn btn-sec btn-block"
                            (click)="lgModal.hide()"><b>CANCEL</b></button>
                    </div>
                    <div class="p-2 bd-highlight">
                        <button type="submit" class="btn btn-dark btn-block px-4"
                            (click)="lgModal.hide()"><b>SAVE</b></button>
                    </div>
                </section>
            </form>
        </div>
    </div>
</article>

标签： javascriptangularlazy-loadingngx-bootstrapngx-image-cropper

解决方案

通过将其连接到延迟加载组件方法来设法解决它。但我认为这可能只是一种解决方法。但是，嘿，在等待其他人发光时，这可能对你们中的任何一个路过都有帮助。

关于如何延迟加载组件。我发现了 Netanel Basal 的这篇很棒的文章。

https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a

干杯~

推荐阅读