Angular依赖注入：如何将MAT_DIALOG_DATA设为可选避免注入错误

可以通过@Optional()装饰器将MAT_DIALOG_DATA标记为可选依赖，这样当组件通过路由加载、不存在该注入项时，Angular会注入null而非抛出错误。

修改构造函数代码 #

constructor(
  private dialog: MatDialog,
  private route: ActivatedRoute,
  @Optional() @Inject(MAT_DIALOG_DATA) private data: any
) {}

后续场景区分处理 #

修改后，你可以在组件初始化逻辑里判断data是否存在，分别处理路由和弹窗两种场景：

ngOnInit() {
  if (this.data) {
    // 组件作为弹窗打开，处理MAT_DIALOG_DATA数据
    console.log('弹窗数据:', this.data);
  } else {
    // 组件通过路由访问，处理路由参数
    this.route.params.subscribe(params => {
      console.log('路由参数:', params);
      // 这里写路由参数的处理逻辑
    });
  }
}

错误原因说明 #

MAT_DIALOG_DATA是Angular Material对话框专属的注入令牌，只有当组件被作为MatDialog的内容打开时，Angular才会自动提供这个依赖的提供者。当组件通过路由直接加载时，没有对应的提供者，所以会触发NullInjectorError。用@Optional()标记后，Angular允许该依赖不存在，此时注入null，避免报错。

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