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

Question

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

Answer 1

Demo

这不是本机支持的。 尽管您可以通过几个步骤快速构建解决方法：

首先您需要删除指示器，因为它不是用户能够与之交互的东西：

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