Question

我一直在寻找解决方案，所以任何帮助都会很棒。

我正在使用Angular Material 2，我想通过按mat-sidenav中的按钮或仅在对话框关闭时使用mat-dialog方法来mat-sidenav。

根据文档，我认为我可以使用#sidenav（或其他内容）标记(click)="sidenav.open()"元素，然后将<mat-sidenav-container> <mat-sidenav #sidenav opened="false"> ... </mat-sidenav> </mat-sidenav-container> <button mat-button (click)="openDialog"></button>放入按钮元素中。但是，它不起作用（我读过它可能与不同的z平面有关吗？）。

它看起来像这样：

sidenav.html

<button mat-button (click)="sidenav.open()">Open Sidenav</button>

dialog.html

library(dplyr)
library(plotly)
library(shiny)

dat <- data.frame(xval = sample(100,1000,replace = TRUE),
                  group1 = as.factor(sample(c("a","b","c"),1000,replace = TRUE)),
                  group2 = as.factor(sample(c("a1","a2","a3","a4"),1000, replace = TRUE)),
                  group3 = as.factor(sample(c("b1","b2","b3","b4"),1000, replace = TRUE)),
                  group4 = as.factor(sample(c("c1","c2","c3","c4"),1000, replace = TRUE)))


create_plot <- function(dat, group, color, shape, width, height) {
  p <- dat %>%
    plot_ly(width = width, height = height) %>%
    add_trace(x = ~as.numeric(get(group)), 
              y = ~xval, 
              color = ~get(group),
              type = "box") %>%
    add_markers(x = ~jitter(as.numeric(get(group))), 
                y = ~xval, 
                color = ~get(color),
                symbol = ~get(shape),
                marker = list(size = 4)
    )
  p
}

calc_boxplot_size <- function(facet) {

  if (facet) {
    width <- 1000
    height <- 700
  } else {
    width <- 500
    height <- 400
  }
  cat(sprintf("WIDTH: %s, HEIGHT: %s", width, height), sep = "\n")
  list(width = width, height = height)
}



ui <- fluidPage(
  selectizeInput("group", label = "group", choices = paste0("group", 1:4),
                 multiple = FALSE),
  selectizeInput("color", label = "color", choices = paste0("group", 1:4),
                 multiple = FALSE),
  selectizeInput("shape", label = "shape", choices = paste0("group", 1:4),
                 multiple = FALSE),
  selectizeInput("facet", label = "facet", choices = c("none", paste0("group", 1:4)),
                 multiple = FALSE, selected = "none"),
  textOutput("size"),
  tagList(
    textInput("plot.width", "width:", 1000),
    textInput("plot.height", "height", 700)
  ),
  uiOutput("plotbox")
)

server <- function(input, output, session) {

  output$plotbox <- renderUI({
    # column(9,
    #        psize <- calc_boxplot_size((input$facet != "none")),
    #        plotlyOutput("plot")
    # )

    psize <- calc_boxplot_size((input$facet != "none"))
    plotlyOutput("plot")

  })

  output$size <- renderText({
    psize <- calc_boxplot_size((input$facet != "none"))
    sprintf("WIDTH: %s, HEIGHT: %s", psize$width, psize$height)

  })

  output$plot <- renderPlotly({
    psize <- calc_boxplot_size((input$facet != "none"))
    if (input$facet == "none") {
      p <- create_plot(dat, input$group, input$color, input$shape, input$plot.width, input$plot.height)
    } else {
      plots <- dat %>%
        group_by_(.dots = input$facet) %>%
        do(p = {
          create_plot(., input$group, input$color, input$shape, input$plot.width, input$plot.height)
        })
      p <- subplot(plots, shareX = TRUE, shareY = TRUE, nrows = 3, margin = 0.02)
    }
  })

}

shinyApp(ui, server)

对话框打开并关闭，sidenav（通过不同的按钮）也是如此。

我确信有一种方法可以从@component打开sidenav，但是在尝试了几种方法后我还没弄清楚。

由于

编辑：我应该说我是Angular 2+的新手，所以如果你能包含一个带有答案的代码片段，我会很感激。

Answer 1

如果您还没有找到答案。以下是我认为可行的方法。

与@PankajParkar一样，您可以在打开对话框时将sidenav变量传递到对话框中。

let dialogRef = this.dialog.open(MyDialogComponent, {
    data: {
        sidenav: this.sidenav
    }
})

然后从对话框内部调用this.data.sidenav.open()。由于我没有尝试过这个，我不确定sidenav最终会在哪里结束。它可以显示在对话框下方，但如果对话框立即关闭，那么我想这不会有问题。

角度材质：从mat-dialog或@component打开mat-sidenav

1 个答案: