Question

我有一个步进器（父级）组件，该组件具有上一个按钮。我想在步进器的第四步中更改该按钮的样式。

<div class="container">
    <mat-horizontal-stepper
        class="mat-stepper"
        #stepper
        labelPosition="bottom"
        [selectedIndex]="currentStep"
        (selectionChange)="onStepChange($event)"
        [linear]="true"
    >
        <mat-step #step1 [completed]="step1.interacted || 0 < currentStep" [stepControl]="stepConfirmation.formGroup">
            <ng-template matStepLabel>Contact Info</ng-template>
            <fo-new-customer-confirmation-info #stepConfirmation></fo-new-customer-confirmation-info>
        </mat-step>
        <mat-step #step2 [completed]="step2.interacted || 1 < currentStep" [stepControl]="stepBusiness.formGroup">
            <ng-template matStepLabel>Business Info</ng-template>
            <fo-new-customer-business-info #stepBusiness></fo-new-customer-business-info>
        </mat-step>
        <mat-step #step3 [completed]="step3.interacted || 2 < currentStep" [stepControl]="stepApplicant.formGroup">
            <ng-template matStepLabel>Applicant Info</ng-template>
            <fo-new-customer-applicant-info #stepApplicant></fo-new-customer-applicant-info>
        </mat-step>
        <mat-step #step4 [completed]="step4.interacted || 3 < currentStep" [stepControl]="stepFinancial.formGroup">
            <ng-template matStepLabel>Financial Review</ng-template>
            <fo-new-customer-financial-review-info class="financial-step" #stepFinancial></fo-new-customer-financial-review-info>
        </mat-step>
    </mat-horizontal-stepper>
    <footer class="row">
        <div
            class="col-md-8 offset-md-2 col-lg-6 offset-lg-3 d-flex flex-column-reverse flex-sm-row justify-content-sm-between">
            <button
                class="previous-stepper-button"
                mat-button
                mat-flat-button
                *ngIf="stepper.selectedIndex !== 0"
                (click)="preview()"
                color="accent">
                Previous
            </button>
            <button
                class="mb-3 mb-sm-0 ml-auto"
                mat-button
                mat-flat-button
                color="primary"
                [ladda]="isDataUploading"
                *ngIf="stepper.selectedIndex !== stepper.steps?.length-1"
                (click)="next()">
                Next
            </button>
        </div>
    </footer>
</div>

当我在第四步（）时，我想更改样式该怎么做？

Answer 1

定义CSS类以按所需方式设置按钮样式。

.common-step-button { 
  // ...
}

.last-step-button {
  // ...
}

然后使用ngClass指令将动态类应用于组件。如我所见，您已经有条件检查当前步骤是否为最后一步，所以

<button [ngClass]="{
   'common-step-button': !step4.interacted && 3 >= currentStep,
   'last-step-button': step4.interacted || 3 < currentStep
}">
   Button
</button>

类将动态应用。
有关更多信息，请检查ngClass documentation

如何更改在父组件上使用的子组件中按钮的位置？

1 个答案: