时间戳

首页 > 解决方案 > Angular 依赖注入沙箱分别为每个组件

angular - Angular 依赖注入沙箱分别为每个组件

问题描述

我有一个基于组件继承的体系结构基类提供了许多有用的方法和属性其中一些功能需要对服务的引用如果我在构造函数上使用 DI 我最终需要将许多 (10+) 参数传递给每个基类我制作的组件。为避免这种情况，我有一个名为 ServiceBag 的服务，其中注入了所有服务，然后我将其注入所有组件——这样我只需将一个变量传递给 super()，就可以了。

默认情况下，会为此 ServiceBag 创建一个单例，然后将其传递给所有组件。只要其中的所有服务也是单例并实例化一次，就可以了。

我现在有一个案例，它们的一些范围仅限于组件，所以如果我只有一个 ServiceBag 实例，那么事情显然不会工作。

底线 - 我想在组件树的任何级别上为每个组件实例创建一个新的 ServiceBag 实例。我可以把它放在提供者中：我拥有的每个组件的 [ServiceBagService] ，它可以工作 - 但对我来说没有意义 - 必须有更好的方法来做到这一点。自定义注入器、装饰器或类似的东西，这将导致它每次都创建一个新实例

此方法适用于根级别提供的服务。

标签： angular

解决方案

我通过扩展 @Component 装饰器解决了这个问题：

import { Component } from '@angular/core';
import { ServiceBagService } from './ServiceBag';

/*
 * The decorator causes the ServiceBag to instanciate every time a new component is created
 * It should be used on all components that inherit from ComponentBase to provide the correct ServiceBag instance to the component
  */

function ComponentEx(args: any = {}): (cls: any) => any
{
    args.providers = [ServiceBagService];
    return Component(args);
}

export default ComponentEx;

推荐阅读