Angular Material 嵌套步进器的标签位置被覆盖

Question

查看 嵌套 Angular Material 步进器，子步进器 (labelPosition="end") 中的标签位置 被覆盖 通过父步进器中的标签位置 (labelPosition="bottom")，如下例所示：

<mat-horizontal-stepper labelPosition="bottom" linear #stepper>
    <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
        <ng-template matStepLabel>ParentLabel</ng-template>
        <mat-horizontal-stepper labelPosition="end" linear #stepperChild>
            <mat-step [stepControl]="firstFormGroup" [editable]="isEditable">
                <form [formGroup]="firstFormGroup">
                    <ng-template matStepLabel>ChildLabel</ng-template>
                    <mat-form-field>
                        <mat-label>Name</mat-label>
                        <input matInput
                          formControlName="firstCtrl"
                          placeholder="Last name, First name"
                          required
                        />
                    </mat-form-field>
                </form>
            </mat-step>
        </mat-horizontal-stepper>
    </mat-step>
</mat-horizontal-stepper>

Here's a Stackblitz 展示问题。有解决办法吗？

Answer 1

如果您深入研究 Angular Material 源代码（目前 11.2），您可以了解类是如何根据 labelPosition 在内部应用的.

material/stepper/stepper.ts

'[class.mat-stepper-label-position-end]': 'labelPosition == "end"',
'[class.mat-stepper-label-position-bottom]': 'labelPosition == "bottom"',

仔细研究样式表 (material/stepper/stepper.scss)，您可以看到 label-position-end 实际上没有应用任何样式。 label-position-bottom 但是有一些样式属性，这些属性应用于 它的所有子项 。

这可能是 Angular Material 本身的错误，因为样式的范围不适合嵌套步进器。嵌套步进器也可能是无意的。

在 angular/components 中打开一个问题以与开发人员取得联系。或者创建一个 PR。

Angular Material 嵌套步进器的标签位置被覆盖

Label position of an Angular Material nested Stepper gets overwritten

angular-material

angular

angular-material-stepper