如何在兩個不同組件之間禁用 Angular mat-tab 動畫？

Question

我的主要內容組件中有一個組件，稱為 answer-form 組件。 我的第二個組件（答案表單）在 mat-tab 中。

雖然問題應與 animation 一起滑動，但按鈕應保持在原位。

這是 answer-form.component.html

<div class="button-toggle-form-field">
  <p>{{ question?.name }}</p>
  <mat-button-toggle-group (change)="onValueSelected($event.value)" #buttonGroup>
    <mat-button-toggle value="true" [checked]="answer === true">Yes</mat-button-toggle>
    <mat-button-toggle value="false" [checked]="answer === false">No</mat-button-toggle>
  </mat-button-toggle-group>
</div>

這是 main-content.component.html mat-tab 部分

      <mat-tab  *ngFor="let question of questions; let i = index" >
        <div *ngIf="onStage == i + 1">
          <app-answer-form [question]="question" [answer]="getAnswerByQuestionId(question.id)">
          </app-answer-form>
        </div>
      </mat-tab>

在此處輸入圖像描述

這就是觀點

太感謝了

Answer 1

嘗試這個：

<div [@.disabled]="true">
 <mat-button-toggle-group (change)="onValueSelected($event.value)" #buttonGroup>
    <mat-button-toggle value="true" [checked]="answer === true">Yes</mat-button-toggle>
    <mat-button-toggle value="false" [checked]="answer === false">No</mat-button-toggle>
  </mat-button-toggle-group>
</div>