Thymeleaf 用开关条件替换导航栏

Posted

技术标签:

【中文标题】Thymeleaf 用开关条件替换导航栏【英文标题】：Thymeleaf replace navbar with switch conditions 【发布时间】：2021-09-14 19:20:51 【问题描述】：

不同角色的用户需要在网页顶部有不同的导航栏。我的 topnavs 是 th:fragments，写在单独的文件中，这部分代码工作正常。 但是当我使用 th:switch 和 th:replace 时，所有的 topnav 都会显示在网页中，而不仅仅是一个。

我一直在寻找这些问题的解决方案，但没有任何帮助：

Thymleaf switch statement with multiple case

How to use thymeleaf conditions - if - elseif - else

我尝试过的事情：

<span th:if = "$role.value == 'role1' " th:replace = "fragments/topnav :: navbar_role1"></span>
<span th:if = "$role.value == 'role2' " th:replace = "fragments/topnav :: navbar_role2"></span>

#2

<span th:if = "$role == 'role1' " th:replace = "fragments/topnav :: navbar_role1"></span>
<span th:if = "$role == 'role2' " th:replace = "fragments/topnav :: navbar_role2"></span>

#3

<span th:if = "$role eq 'role1' " th:replace = "fragments/topnav :: navbar_role1"></span>
<span th:if = "$role eq 'role2' " th:replace = "fragments/topnav :: navbar_role2"></span

#4

<th:block th:switch = "$role">
    <div th:case = "$role eq 'role1' " th:replace = "fragments/topnav :: navbar_role1"></div>
    <div th:case = "$role eq 'role2' " th:replace = "fragments/topnav :: navbar_role2"></div>
</th:block>

在调试器中，我可以在 Java 代码中看到 String 类型的字段角色具有值 role2。它不仅显示了第二个导航栏，还显示了两个导航栏。 一定是我错过了 Thymeleaf 语法​​中的某些内容？

【问题讨论】：

【参考方案1】：

目标片段需要位于子元素中，在这种情况下，替换才能按预期工作。

假设我们在fragments/topnav.html 中有以下片段：

<div th:fragment="navbar_role1">
    <div>This is navbar role 1</div>
</div>
<div th:fragment="navbar_role2">
    <div>This is navbar role 2</div>
</div>

那么你的主页可以如下结构：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Switch Demo</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">        
    </head>
    <body>
        <th:block th:switch="$role">
            <th:block th:case="'role1'">
                <div th:replace="fragments/topnav :: navbar_role1"></div>
            </th:block>
            <th:block th:case="'role2'">
                <div th:replace="fragments/topnav :: navbar_role2"></div>
            </th:block>
        </th:block>
    </body>
</html>

您显然可以使用 th:block 元素或其他东西，例如 &lt;div&gt; 元素，具体取决于您希望最终结构的外观。

另请注意，使用th:switch 时不需要以下内容：

th:case="$role eq 'role1'" // NOT needed

您可以简单地使用值本身：

th:case="'role1'"

这是在此处使用switch 语句的好处之一。

【讨论】：

以上是关于Thymeleaf 用开关条件替换导航栏的主要内容，如果未能解决你的问题，请参考以下文章

学习码匠社区-spring boot 使用bootstrap + thymeleaf 制作导航栏

如何用 UISearchBar 替换导航栏？

开关外的导航栏

在 IE 的 Twitter Bootstrap 导航栏中替换背景

Android如何隐藏底部虚拟按键

Android 底部导航栏中间凸起动态配置替换底部导航栏Tab图标(按钮标签)的实现方案