将闪亮的小部件显示与特定的导航栏 tabPanel() 选择连接起来

我有一个闪亮的仪表板，其中有一个导航栏页面，其中包含两个 tabPanel"Summary" and "Available Funds". Then "Available Funds"由一个tabsetPanel()有两个选项卡面板"Plot" and "Plot2". When "Plot"单击后，右侧边栏中会显示闪亮的小部件。除了第一次加载应用程序并单击"Available funds"。发生这种情况是因为我没有点击"Plot"但我想知道如何连接导航栏 tabPanel"Available funds"以及小部件显示。

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 tabPanel("Summary"

                 ),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot"),
                            tabPanel("Plot2"))
                 )), 
      tags$script(
        '$("a[data-toggle=\'tab\']").click(function(){
          Shiny.setInputValue("tabactive", $(this).data("value"))
        })'
      )
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")

      )

    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {
    output$sl <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observeEvent( input$tabactive , {
      if (input$tabactive == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
  }
)

具有更多选项卡的编辑版本

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 id = "tabactive",
                 tabPanel("Summary",
                          tabsetPanel(
                            id="tabB",
                            type = "tabs",
                            tabPanel("Plot3"),
                            tabPanel("Plot4"))),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot"),
                            tabPanel("Plot2"))
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")
      )
    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {
    output$sl <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })
    output$sl2 <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs2",
        "Number of observations:",
        min = 0, max = 100, value = 50
      )
    })
    output$sl3 <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs3",
        "Number of observations:",
        min = 0, max = 100, value = 50
      )
    })
    output$sl4 <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs4",
        "Number of observations:",
        min = 0, max = 100, value = 50
      )
    })
    observe({
      if (input$tabactive == "Available funds" && input$tabA == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
    observe({
      if (input$tabactive == "Available funds" && input$tabA == "Plot2"){
        golem::invoke_js("showid", "sl2")
      } else {
        golem::invoke_js("hideid", "sl2")
      }
    })
    observe({
      if (input$tabactive == "Summary" && input$tabB == "Plot3"){
        golem::invoke_js("showid", "sl3")
      } else {
        golem::invoke_js("hideid", "sl3")
      }
    })
    observe({
      if (input$tabactive == "Summary" && input$tabB == "Plot4"){
        golem::invoke_js("showid", "sl4")
      } else {
        golem::invoke_js("hideid", "sl4")
      }
    })
  }
)

请检查以下内容（我只是修改了您的 if 条件）：

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 id = "tabactive",
                 tabPanel("Summary"),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot"),
                            tabPanel("Plot2"))
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl")
      )
    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {
    output$sl <- renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })

    observe({
      if (input$tabactive == "Available funds" && input$tabA == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
  }
)

顺便提一句。你不需要那个 JS 代码来获取input$tabactive since navbarPage还有一个id争论。

另一种方法是包裹uiOutput("sl") in conditionalPanel像这样：

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 id = "tabactive",
                 tabPanel("Summary"),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot"),
                            tabPanel("Plot2"))
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        conditionalPanel(condition = "input.tabactive == 'Available funds' && input.tabA == 'Plot'", {uiOutput("sl")})
      )
    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {
    output$sl <- renderUI({
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })
  }
)

OP编辑后：

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 id = "tabactive",
                 tabPanel("Summary",
                          tabsetPanel(
                            id="tabB",
                            type = "tabs",
                            tabPanel("Plot3"),
                            tabPanel("Plot4"))),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot"),
                            tabPanel("Plot2"))
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        uiOutput("sl"),
        uiOutput("sl2"),
        uiOutput("sl3"),
        uiOutput("sl4")
      )
    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {
    output$sl <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs",
        "Number of observations:",
        min = 0, max = 1000, value = 500
      )
    })
    output$sl2 <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs2",
        "Number of observations:",
        min = 0, max = 100, value = 50
      )
    })
    output$sl3 <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs3",
        "Number of observations:",
        min = 0, max = 100, value = 50
      )
    })
    output$sl4 <- renderUI({
      req(input$tabactive)
      sliderInput(
        "obs4",
        "Number of observations:",
        min = 0, max = 100, value = 50
      )
    })
    observe({
      if (input$tabactive == "Available funds" && input$tabA == "Plot"){
        golem::invoke_js("showid", "sl")
      } else {
        golem::invoke_js("hideid", "sl")
      }
    })
    observe({
      if (input$tabactive == "Available funds" && input$tabA == "Plot2"){
        golem::invoke_js("showid", "sl2")
      } else {
        golem::invoke_js("hideid", "sl2")
      }
    })
    observe({
      if (input$tabactive == "Summary" && input$tabB == "Plot3"){
        golem::invoke_js("showid", "sl3")
      } else {
        golem::invoke_js("hideid", "sl3")
      }
    })
    observe({
      if (input$tabactive == "Summary" && input$tabB == "Plot4"){
        golem::invoke_js("showid", "sl4")
      } else {
        golem::invoke_js("hideid", "sl4")
      }
    })
  }
)

这里有一个UI-唯一的解决方案：

library(golem)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = tags$body(class="skin-blue sidebar-mini control-sidebar-open", dashboardPagePlus(
    header = dashboardHeaderPlus(
      enable_rightsidebar = TRUE,
      rightSidebarIcon = "gears"
    ),
    sidebar = dashboardSidebar(),
    body = dashboardBody(
      golem::activate_js(),
      navbarPage("Navbar!",
                 id = "tabactive",
                 tabPanel("Summary",
                          tabsetPanel(
                            id="tabB",
                            type = "tabs",
                            tabPanel("Plot3"),
                            tabPanel("Plot4"))),
                 tabPanel("Available funds",
                          tabsetPanel(
                            id="tabA",
                            type = "tabs",
                            tabPanel("Plot1"),
                            tabPanel("Plot2"))
                 ))
    ),
    rightsidebar = rightSidebar(
      background = "dark",
      rightSidebarTabContent(
        id = 1,
        title = "Tab 1",
        icon = "desktop",
        active = TRUE,
        conditionalPanel(condition = "input.tabactive == 'Available funds' && input.tabA == 'Plot1'", {
          sliderInput(
            "obs1",
            "Number of observations 1:",
            min = 0, max = 1000, value = 500
          )}),
        conditionalPanel(condition = "input.tabactive == 'Available funds' && input.tabA == 'Plot2'", {
          sliderInput(
            "obs2",
            "Number of observations 2:",
            min = 0, max = 100, value = 50
          )}),
        conditionalPanel(condition = "input.tabactive == 'Summary' && input.tabB == 'Plot3'", {
          sliderInput(
            "obs3",
            "Number of observations 3:",
            min = 0, max = 100, value = 50
          )}),
        conditionalPanel(condition = "input.tabactive == 'Summary' && input.tabB == 'Plot4'", {
          sliderInput(
            "obs4",
            "Number of observations 4:",
            min = 0, max = 100, value = 50
          )})
      )
    ),
    title = "Right Sidebar"
  )),
  server = function(input, output) {}
)