mat-expansion-panel内按钮首次点击无路由响应问题排查

问题源于事件冒泡与嵌套路由指令的冲突：

• 点击面板内按钮时，事件会向上冒泡到mat-expansion-panel和外层<td>元素
• <td>本身绑定了routerLink，第一次点击时，冒泡事件会触发<td>的路由跳转逻辑，同时mat-expansion-panel的点击事件也会被触发，干扰按钮自身的routerLink执行，导致需要第二次点击才能正常触发跳转

给面板内的按钮添加事件冒泡阻止，确保点击按钮时，事件不会传递到上层元素，避免路由逻辑冲突。

修改后的代码：

<ng-container matColumnDef="title">
  <th  mat-header-cell class="bg-coldgray-100 " *matHeaderCellDef id="title" mat-sort-header><strong>Titel</strong></th>
  <td [routerLink]="[getUrlByItemType(item.type) + getLatestId(item.versions)]" mat-cell *matCellDef="let item let last = last" appLoadOnScroll [last] ="last" (visibleEvent)="loadProducts($event)">
    <mat-expansion-panel (click)="test()" hideToggle [expanded]="expandedRows[item.id]" >
      <mat-expansion-panel-header>
        {{item.title}}
      </mat-expansion-panel-header>
      <!-- 阻止事件冒泡，避免上层元素干扰路由跳转 -->
      <button 
        [routerLink]="getUrlByItemType(item.type) + getKeyAndValueFromObjectAtFirstIndex(version).id" 
        class="mt-4 cursor-pointer block" 
        *ngFor="let version of getVersionsArray(item.versions)"
        (click)="$event.stopPropagation()"
      >
      {{item.title}}
      </button>
    </mat-expansion-panel>
  </td>
</ng-container>

• 如果mat-expansion-panel上的(click)="test()"没有实际业务作用，可直接移除，减少不必要的事件干扰
• 可以将<td>的routerLink移到mat-expansion-panel-header标签上，仅让表头区域触发最新版本跳转，避免面板展开区域的误触发

内容的提问来源于stack exchange，提问作者Eangy