Question

我具有以下结构：

<mat-accordion>
  <mat-expansion-panel>(some panel body)</mat-expansion-panel>
  <some-component></some-component>
</mat-accordion>

和some-component的模板还包含一些mat-expansion-panel。

问题在于扩展some-component内部的面板不会导致其他面板折叠。

似乎我必须以某种方式指定用于这些子面板的手风琴，但无法弄清楚该怎么做。

根据文档（https://material.angular.io/components/expansion/api），有一个属性，但是尝试执行此操作会导致出现错误Can't bind to 'accordion' since it isn't a known property of 'mat-expansion-panel'。

如何一次只扩展一个面板？

演示重现错误：https://stackblitz.com/edit/angular-lyuqsp

Answer 1

我已经尝试过这段代码并成功了：

if(this.matExpansionPanel.extended) { // usually return false for it catched the state when you clicked the button - when the panel was still closed
    // do something you want
}
else {
    this.matExpansionPanel.toggle();
    // do something you want
}

在您的情况下，在mat-extension-panel标签内添加＃youNameIt ='matExpansionPanel'。

matExpansionPanel是角材料扩展面板的导出类型，如Angular Material中所述。返回.ts脚本，添加@ViewChild（'youNameIt'）matExpansionPanel / 或您想要的任何名称 /：MatExpansionPanel，然后将上述脚本添加到on click函数中。

垫手风琴和嵌套垫扩展面板-如何只打开一个？

1 个答案: