мат-гармошка и вложенная мат-панель расширения - как открыть только одну?

Question

У меня есть следующая структура:

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

и шаблон some-component также содержит некоторые mat-expansion-panel s.

Проблема в том, что расширение панели, котораяВнутри 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'.

Как я могу сделать только одну панель за раз?? 1018*

Демонстрация воспроизведения ошибки: 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, затем добавьте вышеуказанный сценарий в функцию щелчка.