mat-dialog中没有显示mat-stepper

Question

我的垫子-步进器在家庭组件中工作得很好。我想让它在一个对话框中打开，所以我把所有的代码都放在了mat-dialog组件中，但是在<mat-horizontal-stepper>...</mat-horizontal-stepper>中却没有显示任何东西。

我的对话框组件是

<h2 mat-dialog-title>Add Distributor <button mat-dialog-close style="float:right">X</button></h2>

<mat-dialog-content>
  Hello

  <mat-horizontal-stepper [linear]="true" #stepper="matHorizontalStepper" *ngIf="isAddNewDistributorClicked">
    <mat-step [stepControl]="firstFormGroupDistributor">
      <form [formGroup]="firstFormGroupDistributor">
        <ng-template matStepLabel>Identification</ng-template>
        <mat-form-field>
          <input matInput placeholder="Distributor's Name" formControlName="distributor_name" required >
        </mat-form-field>
        <br>
        <label>Registered On</label>
        <mat-radio-group formControlName="distributor_identification_type" [(ngModel)]="distributor_identification_type" [ngModelOptions]="{standalone: true}"  (change)="distributor_identification_type_changed()" >
          <mat-radio-button value="VAT">VAT </mat-radio-button>
          <mat-radio-button value="PAN">PAN</mat-radio-button>
        </mat-radio-group>
        <br>
        <mat-form-field *ngIf="distributor_identification_type=='VAT'">
          <input matInput placeholder="VAT Registration Number" formControlName="distributor_VAT" type="number" >
        </mat-form-field>
        <mat-form-field *ngIf="distributor_identification_type=='PAN'">
          <input matInput placeholder="PAN Registration Number" formControlName="distributor_PAN" type="number" >
        </mat-form-field>
        <div>
          <button mat-raised-button color="primary" matStepperNext [disabled]="!firstFormGroupDistributor.valid">Next</button>
          <button mat-raised-button color="warn" (click)="onAddNewDistributorCancelled()" style="float:right">Cancel</button>
        </div>
      </form>
    </mat-step>
  </mat-horizontal-stepper>
</mat-dialog-content>

我删除了mat-horizontal stepper中的一些代码，因为stackoverflow告诉我，我发布的代码比描述多得多。但是这些代码在我的home.component中运行得很好。我只想在对话框中显示它，但现在它只显示了这么多

​

​

为什么会发生这种情况？

在通过ng test进行测试时，karma说

Failed: Template parse errors:
Can't bind to 'linear' since it isn't a known property of 'mat-horizontal-stepper'.
1. If 'mat-horizontal-stepper' is an Angular component and it has 'linear' input, then verify that it is part of this module.
2. If 'mat-horizontal-stepper' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. .

然后它对所有的属性说。

我的app.module里已经有NO_ERRORS_SCHEMA了..我也添加了CUSTOM_ELEMENTS_SCHEMA，但没有效果

我的dialog.module.ts是

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Component({
selector: 'app-add-distributor-dialog',
templateUrl: './add-distributor-dialog.component.html',
styleUrls: ['./add-distributor-dialog.component.css']
})
export class AddDistributorDialogComponent implements OnInit {

    constructor(public dialogRef: MatDialogRef<AddDistributorDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) { }

    ngOnInit() {
    }
    onNoClick(): void {
        this.dialogRef.close();
    }
}

Answer 1

这是因为垫-水平-步进机的风格。请尝试以下风格。

​

:host ::ng-deep {
  .mat-horizontal-stepper-header-container {
    position: inherit;
  }
}

​