如何在Shiny模块中实现bslib::card_header的动态效果？

问题描述 #

在构建Shiny模块时，尝试使用bslib::card()组件的card_header实现动态文本，但代码无法正常工作。相关代码如下：

模块UI代码 #

my_mod_ui <- function(id) {
    ns <- shiny::NS(id)
    bslib::card(
        id=id,
        full_screen = TRUE, 

        # 无法正常工作的代码：
        bslib::card_header(paste("Selected: ", shiny::textOutput(ns("selected")))), 

        bslib::layout_sidebar(
            sidebar = bslib::sidebar(
                selectInput(ns("choice"), choices=letters(1:5))
            ), 
            "Main contents"
        )
    )
}

模块服务器代码 #

my_mod_srv <- function(id) 
    shiny::moduleServer(id, function(input, output, session) {  
        output$selected <- renderText(input$choice)
})

应用代码 #

ui <- bslib::page_navbar(
    bslib::nav_panel("Test", my_mod_ui("id1"))
)

server <- function(input, output, session) {
    my_mod_srv("id1")
}

shinyApp(ui, server)

问题根源：paste()函数会将textOutput(ns("selected"))转换为其字符串形式（即<div id="id1-selected" class="shiny-text-output"></div>），页面直接显示这段HTML代码而非动态更新的文本。

解决方案 #

要让card_header支持动态文本，需要将静态文本和动态输出元素作为Shiny UI元素组合，而非用paste()拼接字符串。以下是两种可行的修改方式：

方法1：使用tagList组合元素 #

直接用tagList将静态文本和textOutput放在一起，Shiny会正确识别并渲染动态元素：

my_mod_ui <- function(id) {
    ns <- shiny::NS(id)
    bslib::card(
        id=id,
        full_screen = TRUE, 

        # 修改后的card_header：
        bslib::card_header(shiny::tagList("Selected: ", shiny::textOutput(ns("selected")))), 

        bslib::layout_sidebar(
            sidebar = bslib::sidebar(
                selectInput(ns("choice"), choices=letters(1:5))
            ), 
            "Main contents"
        )
    )
}

方法2：使用HTML标签直接构建 #

可以用span等HTML标签组合静态文本和动态输出的ID，这种方式更灵活：

my_mod_ui <- function(id) {
    ns <- shiny::NS(id)
    bslib::card(
        id=id,
        full_screen = TRUE, 

        # 修改后的card_header：
        bslib::card_header(
            shiny::HTML(paste0("Selected: <span id='", ns("selected"), "' class='shiny-text-output'></span>"))
        ), 

        bslib::layout_sidebar(
            sidebar = bslib::sidebar(
                selectInput(ns("choice"), choices=letters(1:5))
            ), 
            "Main contents"
        )
    )
}

原理说明 #

Shiny的UI元素本质是HTML标签对象，paste()会将这些对象强制转换为字符串，导致动态输出无法被Shiny的渲染系统识别。而tagList或直接构建HTML标签的方式，会保留动态输出元素的UI对象属性，让Shiny能够正确绑定服务器端的renderText输出，实现动态更新效果。

内容的提问来源于stack exchange，提问作者Karsten W.