Angular Material mat-tab从数组渲染组件时带构造参数报错如何解决

根因说明 #

这个TS2322报错是TypeScript自动类型推断导致的编译问题，和MatDialog的注入逻辑本身无直接关联：
你未给steps数组显式定义类型，TS会自动将每个step的content数组推断为当前数组内组件类型的专属数组，最终整个steps数组的content字段会被推断为不同组件数组的联合类型，*ngFor遍历联合类型数组时无法匹配NgIterable的类型要求，因此抛出错误。

修复步骤 #

步骤1：导入类型定义并声明统一的Step接口 #

在你定义steps数组的组件TS文件头部添加导入，同时声明Step接口：

import { Type } from '@angular/core';

interface Step {
  label: string;
  // content字段统一指定为任意Angular组件类型的数组
  content: Array<Type<any>>;
}

步骤2：给steps数组显式指定Step类型 #

修改你的steps数组定义，添加类型声明：

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

可选兜底方案 #

如果不想修改TS类型定义，也可以直接在模板的*ngFor中添加类型断言绕过TS校验：

<div *ngFor="let component of $any(step.content);">
    <ng-container *ngComponentOutlet="component"></ng-container>
</div>

额外检查项 #

确认你使用的组件模块中已经导入了MatDialogModule，即可保证Step2Component中的MatDialog注入正常生效，不会出现运行时错误。

内容的提问来源于stack exchange，提问作者RBFraphael