迁移至Standalone Component后Material Dialog与组件服务实例不一致问题

当使用独立组件结合Material Dialog时，若未指定Dialog的注入器，Angular会为Dialog创建一个全新的注入上下文。这个新注入器无法访问组件A所在注入器的服务实例，导致两种问题：

• 若组件B未在自身providers中声明SomeService，会直接抛出注入错误
• 若组件B声明了SomeService，则会生成新的服务实例，无法与组件A共享

迁移前在同一模块下时，模块的注入器是全局共享的，因此组件A和B能拿到同一个服务实例。

1. 将SomeService配置为全局单例 #

首先确保服务是根级注入的，保证整个应用中只有一个实例：

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

@Injectable({
  providedIn: 'root' // 根级注入，全局单例
})
export class SomeService {
  // 你的服务逻辑代码
}

2. 打开Dialog时传递组件A的注入器 #

在组件A中打开Dialog时，把当前组件的Injector传入Dialog配置，让Dialog组件B复用组件A的注入上下文：

import { Component, Injector } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ComponentB } from './component-b.component';

@Component({
  selector: 'app-component-a',
  standalone: true,
  imports: [/* 按需导入Material模块或其他依赖 */],
  template: `<button (click)="openDialog()">打开Dialog</button>`
})
export class ComponentA {
  constructor(
    private dialog: MatDialog,
    private injector: Injector, // 注入当前组件的注入器
    private someService: SomeService
  ) {}

  openDialog() {
    this.dialog.open(ComponentB, {
      injector: this.injector // 关键：传递注入器复用上下文
    });
  }
}

3. 组件B直接注入服务即可 #

组件B无需在自身providers中声明SomeService，直接注入就能拿到和组件A相同的实例：

import { Component } from '@angular/core';
import { SomeService } from './some.service';

@Component({
  selector: 'app-component-b',
  standalone: true,
  imports: [/* 按需导入 */],
  template: `<p>Dialog内容</p>`
})
export class ComponentB {
  constructor(private someService: SomeService) {
    // 此处的someService与ComponentA中的实例完全一致
  }
}

特殊场景：服务非根级提供 #

如果SomeService是在某个共享独立组件/模块中提供的（而非root），需要满足两个条件：

• 组件A和组件B都导入了该共享组件/模块
• 打开Dialog时依然传递组件A的injector，确保Dialog使用相同的注入上下文

内容的提问来源于stack exchange，提问作者Muhammad-Ali