使用布局时 Thymeleaf 显示元素处于活动状态

Question

我想在单击该元素时将导航元素显示为活动（class 导航项活动），而其他元素具有非活动 class（导航项）。我也在使用 Thymeleaf 布局。

在控制器中我有以下代码

    @GetMapping("/login")
public String getLoginPage(Model model) {
    model.addAttribute("activeLink", "Login");
    return "login";
}

在 layout.html 文件中（此文件包含所有页面的通用页眉和页脚），我有以下代码

    <nav th:replace="navigation.html :: navibar(activeLink=${activeLink})"></nav>

在navigation.html中（这个文件只有导航相关的代码），我有类似

的代码

<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top" th:fragment="navibar(activeLink)">
<a class="navbar-brand" href="/title">Title</a>

<div class="collapse navbar-collapse" id="navbarsExampleDefault">
    <ul class="navbar-nav mr-auto">
        <li th:class="${#strings.equals(activeLink, 'Home')} ? 'nav-item active' : 'nav-item'"><a class="nav-link" href="/">Home<span class="sr-only">(current)</span></a></li>
        <li th:class="${#strings.equals(activeLink, 'Register')} ? 'nav-item active' : 'nav-item'"><a class="nav-link" href="/register">Register</a></li>
        <li th:class="${#strings.equals(activeLink, 'Login')} ? 'nav-item active' : 'nav-item'" sec:authorize="isAnonymous()"><a class="nav-link" th:href="@{/login}">Login <span class="sr-only">(current)</span></a></li>
        <li class="nav-item active" sec:authorize="isAuthenticated()"><a class="nav-link" th:href="@{/logout}">Logout <span class="sr-only">(current)</span></a></li>
    </ul>
</div>

在控制器（登录）返回的模板中，我没有任何导航链接特定代码。

以上代码有效，但是有没有更好更简单的方法来激活导航项？另外，如果我使用 flash 属性

redirectAttributes.addFlashAttribute("activeLink", "Register");

在控制器中，则该功能不起作用

Answer 1

为避免将 activeLink 添加到模型中，您可以在包含片段时传递 activeLink。

喜欢：

<div th:replace="nagivation :: navibar('Login')"></div>

顺便说一句。您可以删除布局名称后的 .html。

使用布局时 Thymeleaf 显示元素处于活动状态

Thymeleaf display element as active when using layout

spring

navigationbar

thymeleaf

spring-boot