我可以在同一页中使用相同的Thymeleaf片段模式，但参数不同吗？

Question

我有卡的一面。卡片有不同的标题和内容。通过单击卡片，一个模式将打开卡片中的特定文本。但是，当我尝试时，总是使用来自第一个片段调用的参数。

这是我的密码：

Webside的卡片，它调用模式两次：

<!-- First Card -->
<div class="col-12 col-md-6 col-lg-4 mb-md-4 mb-lg-5 pe-4 ps-4">
             <div th:insert="fragments/Modal_Card :: Modal_Card('Text 1', 'Headline1')"></div>
                    <div class="card shadow text-white h-100" data-bs-toggle="modal" href="#Modal_Card" style="background-color: var(--own-green-2); border-radius: 1rem">
                        <div class="card-body px-5 h-100">
                            <div class="row">
                                <div class="col-auto">
                                    <i class="bi bi-pc-display" style="font-size: 2.5rem;"></i>
                                </div>
                                <div class="col mt-auto mb-auto">
                                    Headline1
                                </div>
                            </div>
                            <div class="row pt-3 pb-3">
                                <hr class="mb-3">
                                Text1
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Second Card -->
                <div class="col-12 col-md-6 col-lg-4 mb-md-4 mb-lg-5 pe-4 ps-4">
                  <div th:include="fragments/Modal_Card :: Modal_Card('Text 2', 'Headline2')"></div>
                    <div class="card shadow text-white h-100" data-bs-toggle="modal" href="Modal_Card" style="background-color: var(--own-green-2); border-radius: 1rem">
                        <div class="card-body px-5 h-100">
                            <div class="row">
                                <div class="col-auto">
                                    <i class="bi bi-pc-display" style="font-size: 2.5rem;"></i>
                                </div>
                                <div class="col mt-auto mb-auto">
                                    Headline2
                                </div>
                            </div>
                            <div class="row pt-3 pb-3">
                                <hr class="mb-3">
                                Text2
                            </div>
                        </div>
                    </div>
                </div>

带有Modal的片段：

<div th:fragment="Modal_Card(content, headline)" class="modal fade" tabindex="-1"
     aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true" id="Modal_Card">

    <!-- Modal -->
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><span th:text="${headline}"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">
                <p th:text="${content}"></p>



                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>
</div>

无论我点击哪一张卡，模态总是有参数"Headline1“和"Text1”。如果有人知道解决办法，请告诉我。

Answer 1

这两个调制解调器都有一个id of Modal_Card。向片段中添加一个额外的参数，并在片段中使用th:id，因此id对于每个模式都是唯一的。

就像这样：

<div th:fragment="Modal_Card(content, headline, modalId)" class="modal fade" tabindex="-1"
     aria-labelledby="exampleModalCenterTitle"
     aria-hidden="true" th:id="${modalId}">

像这样使用它：

<div th:insert="fragments/Modal_Card :: Modal_Card('Text 1', 'Headline1', 'Modal_Card_1')"></div>