如何使角形材料扩展面板仅以编程方式打开，而不是在单击面板标题时不打开

Question

我有一个mat-expansion-panel，当单击mat-expansion-panel-header时会打开。有没有办法禁用此行为？我想使用其打开方法在其他位置打开扩展面板，并通过单击标题禁用打开它的功能。

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();
}