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

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内部的面板不会导致其他面板崩溃。

似乎我不得不指定手风琴用于这些儿童面板，但不知道如何使用。

根据docs (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扩展面板标记中，添加#youNameIt='matExpansionPanel‘。

matExpansionPanel是出口类型的角材料膨胀板，如角材料中所提到的。返回到.ts脚本，添加@ViewChild('youNameIt') matExpansionPanel /or任何您想要的/: MatExpansionPanel，然后在您的function函数中添加上面的脚本。