Angular 如何防止垫子扩展面板关闭？

我的页面中有matAccordion，其中面板的数量是动态的。每个面板都包含一个表单。我想阻止我的小组关闭，直到表格被正确填写并生效

我找不到任何会阻止面板关闭的事件。“关闭”事件在面板关闭动画发生后激发

是否有一些逻辑来控制关闭？

  <mat-expansion-panel [expanded]="!formSubmited$ | async"></mat-expansion-panel>

这里有一个简单的解决方案

your-component.html

...
<mat-expansion-panel [opened]="panelOpened($event)">
    <mat-expansion-panel-header [ngClass]="(isPanelOpened)?'no-events':'default'">...</mat-expansion-panel-header>
</mat-expansion-panel>
...

your-component.css

.no-events {
    pointer-events: none;
}

.default {
    pointer-events: auto;
}

---

在第一个面板打开时，它会将

ispaneloped

更改为true，以删除mat面板上的事件触发器。这意味着用户不能在表单提交前关闭它。在

submitForm（）

的末尾，您正在将

ispaneloped

切换为false，以允许用户关闭面板。

向CSS添加一个类，该类具有禁用指针事件的规则：

。禁用指针{
指针事件：无；
}

然后有条件地将此类添加到

mat扩展面板标题中，例如：


小组标题

要从标题隐藏切换图标，请有条件地将
隐藏切换
道具添加到您的
手风琴垫
，例如：


...
您可以使用
扩展面板上的
[disabled]=“isDisabled”
。尝试了这个。不起作用，但这也会阻止单击事件，对吗？如果用户试图在不填写表单的情况下关闭面板，我想触发验证。我尝试了这种方法，之后我意识到，执行指针事件：无也不允许我填写表单。例如选择单选按钮或下拉值。尝试在窗体上添加
指针事件：auto
，这应该可以工作。顺便说一句，我认为将
指针事件：none
添加到
扩展标题
不会对窗体产生影响，但是，也许其他人可以表示，如果您不想将类添加到CSS中，那么您可以简单地在mat Expansion面板标题中使用单一样式绑定，例如

.no-events {
    pointer-events: none;
}

.default {
    pointer-events: auto;
}