如何使用Shinyjs识别Tab是否在Shiny中处于活动状态？

问题描述

使用InitializeComponent();包，我试图检查选项卡在观察器中是否处于活动状态并“执行某些操作”，即下面的示例中的shinymaterial。 print("Hello")中的选项卡没有与之关联的闪亮的inputId，如果选项卡处于打开状态，则仅带有shinymaterial::material_tabs()的href。

以下是我尝试使用class = "active"软件包进行的小尝试：

代表：

shinyjs

解决方法

活动选项卡更改时可能会触发一个事件，但我对该程序包不熟悉，我也不知道。

以下是使用 MutationObserver 的解决方案（它不使用shinyjs）。

library(shiny)
library(shinymaterial)

js <- "
$(document).on('shiny:connected',function() {
  var elem = $('ul.tabs')[0];
  // create an observer instance
  var observer = new MutationObserver(function(mutations) {
    for(var i = 0; i < mutations.length; i++) {
      var mutation = mutations[i];
      if(mutation.type === 'attributes' && mutation.attributeName === 'class') {
        var target = mutation.target;
        if(target.nodeName === 'A' && target.className === 'active') {
          var activeTab = target.getAttribute('href');
          Shiny.setInputValue('activeTab',activeTab);
        }
      }
    }
  });
  // configuration of the observer
  var config = {childList: false,subtree: true,attributes: true};
  // observe element
  observer.observe(elem,config);
})
"

ui <- material_page(

  tags$head(tags$script(HTML(js))),title = NULL,# Define tabs
  material_tabs(
    tabs = c(
      "First Tab" = "first_tab","Second Tab" = "second_tab"
    )
  ),# Define tab content
  material_tab_content(
    tab_id = "first_tab",tags$h1("First Tab Content")
  ),material_tab_content(
    tab_id = "second_tab",tags$h1("Second Tab Content")
  )
)

server <- function(input,output,session) {
  observeEvent(input[["activeTab"]],showNotification(
      tags$strong(paste0("Active tab: ",input[["activeTab"]])),type = "message"
    )
  )  
}

shinyApp(ui = ui,server = server)