angular - 在扩展面板中突出显示扩展面板上的单选按钮

Question

我已在每个expansion-panel内放置了单选按钮的accordion像这样:

我想在单击特定的扩展面板时突出显示比例按钮，如果我关闭面板突出显示应该:

注意:我想仅在单击面板而不是单击单选按钮时突出显示单选按钮。

Stackblitz DEMO

Answer 1

这是将复选框更改为面板状态的相当简单的方法。

<mat-accordion>
  <mat-expansion-panel #panel1>
    <mat-expansion-panel-header >
      <mat-panel-title>

         <mat-radio-button [checked]="panel1.expanded">Panel 1</mat-radio-button>
      </mat-panel-title>
    </mat-expansion-panel-header>
              Panel 1 comes here
  </mat-expansion-panel>
  <mat-expansion-panel  #panel2>>
    <mat-expansion-panel-header>
        <mat-panel-title>
         <mat-radio-button [checked]="panel2.expanded"> Panel 2</mat-radio-button>
        </mat-panel-title>
    </mat-expansion-panel-header>
                  Panel 2 comes here
  </mat-expansion-panel>
   <mat-expansion-panel  #panel3>
    <mat-expansion-panel-header>
        <mat-panel-title>
                <mat-radio-button [checked]="panel3.expanded">Panel 3</mat-radio-button>
        </mat-panel-title>
    </mat-expansion-panel-header>
                  Panel 3 comes here
  </mat-expansion-panel>
</mat-accordion>

工作副本在这里 - https://stackblitz.com/edit/angular-uhuunt-flryaz