在不更改文本不透明度的情况下禁用垫子扩展答案

【问题标题】：Disabling mat-expansion without changing text opacity在不更改文本不透明度的情况下禁用垫子扩展
【发布时间】：2019-08-21 21:16:58
【问题描述】：

我创建了一个角垫扩展面板，它将执行警报框事件并扩展面板。我的要求是只显示警报框而不是展开。

我尝试禁用垫子扩展，但它会改变我不想要的文本不透明度值。我什至尝试过css point-events，但它会使事件警报框不起作用。请帮我解决这个问题。

HTML 代码：

 <mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title (click)="onClick()" >
       Hi
      </mat-panel-title>
      <mat-panel-description>
        Hello
      </mat-panel-description>
    </mat-expansion-panel-header>
<p>hi there</p>
  </mat-expansion-panel>
</mat-accordion>

TS 代码：

export class AppComponent { 
  onClick(){
    alert("something");
  }

【问题讨论】：

标签： javascript html css angular typescript

【解决方案1】：

我知道event.stopPropagation(); 能够阻止后台进程执行。像这样将它添加到您的方法中：

export class AppComponent { 
      onClick(){
        alert("something");
        event.stopPropagation();
      }

【讨论】：

老兄这是一个巧合。我实际上想通了并打开了要删除的问题，但是您给出了正确的答案。谢谢你，伙计
太棒了！你能告诉我你的解决方案是什么吗？出于好奇。
同一个人。 event.stopPropagation() 是我用来不扩展行的（基本上它停止父事件，所以它不会扩展）

【解决方案2】：

你可以这样做。

第 1 步 - 删除此代码。

<mat-panel-description>
    Hello
</mat-panel-description>

第 2 步 - 为此特定容器更改此 css。

.mat-expansion-panel-body {
    padding: 0 24px 16px;
}

到

.mat-expansion-panel-body {
    padding: 0;
}

当我们扩展手风琴时，它的高度会发生变化，您可以使用这两个Input 绑定来保持它不变。

@Input()
collapsedHeight: string

@Input()
expandedHeight: string

如果您有任何疑问，请告诉我。

【讨论】：

即使在使用了这些@inputs 面板后，它仍在折叠的高度区域中展开。但我不想打开它。
尝试将display: none 设置为.mat-expansion-panel-body