Estoy tratando de representar algunos componentes en un <mat-tab-group> a partir de una matriz de componentes. De esta manera:

TS

 ... steps = [ {label: "Step 1", content: [Step1Component]}, {label: "Step 2", content: [Step2Component]}, {label: "Step 3", content: [Step3_1Component, Step3_2Component]}, {label: "Step 4", content: [Step4Component]}, ] ...

HTML

 ... <mat-tab-group> <div *ngFor="let step of steps;"> <mat-tab label="{{step.label}}"> <div *ngFor="let component of step.content;"> <ng-container *ngComponentOutlet="component"></ng-container> </div> </mat-tab> </div> </mat-tab-group> ...

Todo funciona bien, pero uno de mis componentes ahora necesita tener un MatDialog, por lo que ese componente se ve así:

TS

 ... @Component({ selector: 'app-step2', templateUrl: './step2.component.html', : ['./step2.component.scss'] }) export class Step2Component implements OnInit { constructor(public dialog: MatDialog) { } } ...

Entonces, noté que cuando el constructor del componente tiene un argumento (en este ejemplo, public dialog: MatDialog ), mi aplicación deja de funcionar con este error:

 Error: src/app/pages/home/home.component.html:40:85 - error TS2322: Type '(typeof Step1Component)[] | (typeof Step2Component)[]' is not assignable to type '((typeof Step1Component)[] & NgIterable<typeof Step1Component>) | null | undefined'.

¿Alguien puede ayudarme a arreglar esto? No puedo encontrar ninguna solución viable a esto.

¡Gracias!