Angular 角度材质嵌套步进器的标签位置被覆盖

查看嵌套的角度材质步进器，子步进器（

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>

父标签
儿童标签
名称

---

展示这个问题。有办法解决这个问题吗？

如果您稍微研究一下角度材质源代码（当前为

11.2

），您可以根据

标签位置了解如何在内部应用这些类

material/stepper/stepper.ts

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

翻开样式表（
material/stepper/stepper.scss
），您可以看到
标签位置结束
实际上没有应用任何样式<代码>标签位置底部

但是有一些样式属性，这些属性应用于其所有子项

这可能是角度材质本身的一个缺陷，因为样式的范围不适合嵌套步进器。也可能是嵌套的步进器是无意的

在

angular/components

中打开一个问题，与开发人员联系。或者创建一个公共关系