Angular双主组件向子弹窗组件传值遇依赖注入错误问题

问题场景 #

两个主组件（FirstMainComponent、SecondMainComponent）需向同一个子组件（ChildComponent，作为动态弹窗）传递数据，其中FirstMainComponent传值正常，SecondMainComponent传值失败并触发报错。

组件代码 #

FirstMainComponent（传值正常） #

@Component({
 ...
  providers: [DialogService]
})
export class FirstMainComponent implements OnInit {

constructor(public dialogService: DialogService){}
...

const dialogRef= this.dialogService.open(ChildComponent, {
  header: 'Something',
  width: '90%',
  baseZIndex: 100000,
  closeOnEscape : true,
  closable : true,
  data: {
    Code: '1001',
    Name:'Something'
}
});
dialogRef.onClose.subscribe((async (childModel: ChildModel) => {
  // 业务代码
}));
}

SecondMainComponent（传值失败） #

@Component({
     ...
      providers: [DialogService]
    })
export class SecondMainComponent implements OnInit{
constructor(){
    public dialogService: DialogService
}
...
const dialogRef= this.dialogService.open(ChildComponent, {
  header: 'Something',
  width: '90%',
  baseZIndex: 100000,
  autoZIndex: true,
  closeOnEscape: true,
  data: {
    Code: '1002'
  }
});
dialogRefFindCustomers.onClose.subscribe((childModel: ChildModel) => {
  // 业务代码
    }
  }
});
}

ChildComponent #

@Component({
  ...
// 无providers配置
})
export class ChildComponent implements OnInit {

constructor(){
public ref: DynamicDialogRef,
public config: DynamicDialogConfig
}
...
console.log("this.config.data");
console.log(this.config.data);
this.ref.close();
}

报错情况 #

SecondMainComponent传值时的错误 #

• NullInjectorError: StaticInjectorError(AppModule)[CustomerSearchComponent -> DynamicDialogRef]:
• TypeError: Cannot read properties of undefined (reading 'instance')

给ChildComponent添加providers后的错误 #

若在ChildComponent的@Component中配置 providers: [DynamicDialogRef, DynamicDialogConfig]，两个主组件都会触发报错：

Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'Code')

原因是this.config.data 的值为undefined。

问题分析与解决方案 #

核心错误点 #

1. SecondMainComponent构造函数注入语法错误：public dialogService: DialogService写在了constructor的大括号内部，导致依赖注入失败，this.dialogService为undefined，调用open方法时触发报错。
2. ChildComponent构造函数语法错误：注入参数ref和config未放在constructor的括号内，导致无法正确注入实例，触发NullInjectorError。
3. 错误添加providers：DynamicDialogRef和DynamicDialogConfig由DialogService打开弹窗时自动提供，手动添加到ChildComponent的providers会覆盖默认实例，导致无法获取传入的data。

修正后的代码 #

修正SecondMainComponent的构造函数

@Component({
     ...
      providers: [DialogService]
    })
export class SecondMainComponent implements OnInit{
  // 将注入参数移至constructor括号内
  constructor(public dialogService: DialogService){}
...
const dialogRef= this.dialogService.open(ChildComponent, {
  header: 'Something',
  width: '90%',
  baseZIndex: 100000,
  autoZIndex: true,
  closeOnEscape: true,
  data: {
    Code: '1002'
  }
});
// 变量名保持一致，修正之前的dialogRefFindCustomers为dialogRef
dialogRef.onClose.subscribe((childModel: ChildModel) => {
  // 业务代码
});
}

修正ChildComponent的构造函数

@Component({
  ...
// 不要添加DynamicDialogRef和DynamicDialogConfig到providers
})
export class ChildComponent implements OnInit {
  // 将注入参数放在constructor括号内，完成正确注入
  constructor(public ref: DynamicDialogRef, public config: DynamicDialogConfig){}
...
console.log("this.config.data");
console.log(this.config.data); // 现在可正常获取传入的data
this.ref.close();
}

额外注意事项 #

• 确保DialogService已在AppModule全局导入，或在每个主组件的providers中声明（如当前代码所示）。
• 订阅弹窗关闭事件时，变量名需与open方法返回的dialogRef一致，避免未定义变量错误。

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