同时打开同一个 angular 组件作为不同的实例

Question

我有一个 angular 组件，它有一个数据源列表，该组件是从服务的 BehaviourSubject 订阅的。

在 list.component.html 模板文件中：

<ng-container *ngFor="let item of items;">
    <h2>item.name</h2>
</ng-container>

在 list.component.ts 文件中：

ngOnInit(): void {
  this.service.items$.subscribe(data=>{
      this.items = data;
 });
}

单击列表中的项目时，它会在同一个表中加载所选项目的子项目。

现在，我在这个组件旁边有一个按钮，它将打开一个 MatDialog window。

这个 MatDialog windows 应该包含上述相同的组件。

我试过的：

我为这个组件创建了一个包装器，并在 MatDialog 中打开了包装器。

wrapper.component.html

<div>
 <app-list></app-list>
</div>

里面 list.component.html 在 MatDialog 中打开 WrapperComponent：

this.matDialog.open(WrapperComponent);

一切正常，直到我单击 matDialog 中的列表项。

所选项目在 matDialog 的列表中加载。 但同时在后台原始 ListComponent 也在加载相同的值。 因为，当单击列表中的项目时，来自 BehaviourSubject 的订阅值会更新。

this.service.updateListValue = updatedValue;

原始 ListComponent 加载了路由器模块和解析器。

我怎样才能避免这种情况？ 如何打开相同的组件但作为两个不同的实例？

Answer 1

要将服务 class 作为多个实例注入到多个模块中：

你能做到这一点，

为您服务 class @Injectable

替换： @Injectable({ providedIn: 'root' })

与： @Injectable({ providedIn: 'any' })

使用providedIn: 'root'选项时，angular 注入器将使您的服务 class 充当 singleton 的整个应用程序实例。

当providedIn: 'any'选项被使用时，Angular 注入器将为每个注入此服务的模块实例化一个新服务。

奖励：如果 Class ServiceA 仅由 ModuleA 使用，您可以使用

@Injectable({ providedIn: ModuleA }) 。 当您拥有仅由单个模块使用的服务时，这将是最佳选择

参考： NG0201

要将服务 class 作为多个实例注入到同一模块内的多个组件中：

@ misha130 的答案也可以。

Answer 2

为了拥有特定于组件的服务，您需要在@Component装饰器元数据中提供它。 这将为每个组件实例创建一个服务实例。

@Component({
    providers: [SomeService],
})

您的服务也不应该在 root 中providedIn 。

@Injectable()

如果您想使用相同的组件和不同的元数据，您可以基于模块有 2 种不同的服务实现。

您可以声明一个代表服务的令牌

export const SERVICE_TOKEN: InjectionToken<SomeService> = new InjectionToken<SomeService>('Some Service Token');

然后在每个模块中指定要注入的服务：

  providers: [
    {
      provide: SERVICE_TOKEN,
      useClass: SomeServiceA,
    },

然后在组件的构造函数中像这样注入它：

   constructor(@Inject(SERVICE_TOKEN) private readonly someService: SomeService){}