Как сделать так, чтобы панель расширения углового материала открывалась программно, а не при нажатии на заголовок панели

Question

У меня есть панель расширения матов, которая открывается при нажатии на заголовок панели расширений матов.Есть ли способ отключить это поведение?Я хочу открыть панель расширения в другом месте, используя ее метод open, и отключить возможность открывать ее, щелкнув заголовок.

Answer 1

Демо

Это не то, что изначально поддерживается.Хотя вы можете быстро создать обходной путь в несколько шагов:

Сначала необходимо удалить индикатор, поскольку пользователь не сможет взаимодействовать с ним:

<mat-expansion-panel #panel1 [hideToggle]="true">

Обратите внимание, что я также дал компоненту имя, чтобы позднее получить его ссылку.

Чтобы предотвратить взаимодействие с пользователем, мы добавим класс css prevent-click:

<mat-accordion class="prevent-click">

.prevent-click{
  pointer-events: none;
}

Если вы хотите, чтобы пользователь мог взаимодействовать с содержимым панелей:

<button class="authorize-click" mat-raised-button>test</button>

.authorize-click{
  pointer-events: auto;
}

Примечание: вы можете переносить содержимоепанель расширения с этим классом, позволяющая любое взаимодействие внутри.

---

Для взаимодействия с панелями вы используете ссылку на панели (см. выше).Вы можете вызвать 3 функции

• open()
• close()
• toggle()

<button (click)="panel1.toggle()">Toggle panel 1</button>

---

Если вы хотите взаимодействовать с панелями из вашего компонента, вам нужно получить их ссылки, используя ViewChild().

Пример:

@ViewChild('panel1') firstPanel: MatExpansionPanel;

public toggleFirstPanel(){
  this.firstPanel.toggle();
}