时间戳

首页 > 解决方案 > 制作可重用模态组件的正确方法

angular - 制作可重用模态组件的正确方法

问题描述

我找到了几个例子，但它们似乎都相互矛盾或者是为旧版本的 ng-bootstrap 设计的。

什么是创建可以放置在公共文件夹中然后在页面上的多个模态中重复使用的简单模态的正确方法？我想传入一个表单组件作为模态的主体。

是的，我在官方网站上看到了这个例子。但它没有考虑在页面上有多个模态/模态触发器。它假设您只有一个并且不必定位。我需要传入一个 id，以便在模态中编辑一段数据并将其保存回数据库。

标签： angulartwitter-bootstraptypescriptbootstrap-modalng-bootstrap

解决方案

您可以制作可重用的模态布局

首先要做的就是添加模态布局

<!-- The Default modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="font-size:19px;">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">

            </div>
        </div>
    </div>
</div>

然后使用 jquery 触发模态

$(document).on('click', '.click-btn', function () {
    var dataURL = $(this).attr('data-href');
    var id = $(this).attr('id');
    $('.modal-title').html(id);
    $('.modal-body').load(dataURL, function () {
        $('#myModal').modal({ show: true });
    });
});

注意：dataURL是你要显示的模态框的内容

希望能帮助到你

推荐阅读