Angular 如何避免在多个组件中注入相同的依赖关系

Angular 如何避免在多个组件中注入相同的依赖关系,angular,Angular,我在应用程序中使用Angular 7。 我正在构造函数(---)中的多个组件中注入相同的依赖项。 我可以在超级类/组件中的何处注入一些代码并重用它吗?。。 如果有人知道最好的解决方案,请告诉我 提前感谢否。您可以在超级类中定义它并使用它,但注入必须在实例化的类/组件中发生 class ComponentBase { constructor(protected service: SomeService) { } } class MyComponent extends ComponentBa

我在应用程序中使用Angular 7。 我正在构造函数(---)中的多个组件中注入相同的依赖项。 我可以在超级类/组件中的何处注入一些代码并重用它吗?。。 如果有人知道最好的解决方案,请告诉我


提前感谢

否。您可以在超级类中定义它并使用它,但注入必须在实例化的类/组件中发生

class ComponentBase {

  constructor(protected service: SomeService) { }
}

class MyComponent extends ComponentBase {

  constructor(service: SomeService) { super(service) }

  doSomething() {
    this.service.doSomething()
  }
}
正如你所看到的,没有真正的好处

编辑:提出了一种解决方案,通过传递注入器而不是依赖项,显著减少了样板文件。在我看来,这是不好的做法,违反了法律。显式依赖原则指出,类或方法需要显式指定实现其目标所需的依赖项。通过传递注入器而不是实际的依赖项,您没有将依赖项指定为显式的。事实上,对于类所需的依赖项没有任何定义。这允许该类从不同的执行路径中调用任意数量的服务,而不能控制它使用什么和不使用什么

正确完成依赖项注入有两种形式。注入构造函数参数或注入方法参数。这是明确的、可控的、可维护的和类型安全的


虽然这是事实,它是更多的代码编写。更多的代码将使您从一系列的麻烦中解脱出来。并保持类的可读性。当传递注入器时,没有人知道您的类使用什么或不使用什么。

如果总是相同的注入器,您可以使用抽象组件并使用
注入器

export abstract class BaseComponent {

    protected myService1: MyService1;
    protected myService2: MyService2;
    protected myService3: MyService3;

    constructor(@Inject(Injector)public injector: Injector) {
        this.myService1 = injector.get(MyService1);
        this.myService2 = injector.get(MyService2);
        this.myService3 = injector.get(MyService3);
    }
}
@Inject
允许您在child上没有构造函数

还有孩子:

export class MyComponent extends BaseComponent {
    constructor(public injector: Injector) {
        super(injector);
    }
    ...
}


没有喷油器也能做到这一点吗?i、 e.
@Inject(MyService1)
?尽量避免使用喷油器。最后一个是如何工作的是一些打字脚本魔术?最后一个只工作是因为
@Inject(Injector)
。如果您不想使用它,您必须使用
super(注入器)我个人在
BaseComponent
BaseService
类中使用Injector,因为它允许您在这些类中添加依赖项,而无需任何重构。所以这对我来说主要是
Injector
的一个用例。所以这对
构造函数(@Inject()public-myService1:myService1,@Inject()public-myService2:myService2,@Inject()public-myService3:myService3)
必须有效。你是对的,但是如果你的一个孩子需要更多的DEP,您必须在
super
中给出每一个,而不是一个deps
Injector
export class MyComponent extends BaseComponent {
    ...
}