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

问题描述

查看嵌套的 Angular Material Stepper，子步进器 (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> )，如下例所示：

{
  "value": [
    {
      "id": "439AD01B4BE67DB1","name": "Primary","value": "000000000000000000000000000000000000000000000000000000","connectionString": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx","lastModified": "2018-04-24T16:30:54+00:00","readOnly": false
    },{
      "id": "CB45E100456857B9","name": "Secondary",{
      "id": "B3AC55B7E71431A9","name": "Primary Read Only","readOnly": true
    },{
      "id": "E2AF6A9A89DCC177","name": "Secondary Read Only","readOnly": true
    }
  ]
}

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

解决方法

如果您稍微深入研究 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。