2

查看嵌套的 Angular Material Stepper，子 stepper ( labelPosition="end")中的标签位置被父 stepper ( ) 中的标签位置覆盖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>

这是一个展示该问题的 Stackblitz。有没有解决的办法？

4

1 回答 1

1

如果您11.2稍微研究一下 Angular Material 源代码（当前），您可以了解这些类是如何在内部应用的，具体取决于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。

于 2021-02-26T11:01:34.947 回答