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

Question

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

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

网页代码：

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

Answer 1

我知道event.stopPropagation();能够阻止后台进程执行。将其添加到您的方法中，如下所示：

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

Answer 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

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