我有一组Angular2组件，它们都需要注入某个服务。我的第一个想法是创建一个超类并在超类中注入该服务。然后，任何一个组件都可以扩展该超类，但这种方法不可行。
简化示例：
export class AbstractComponent {
constructor(private myservice: MyService) {
// Inject the service I need for all components
}
}
export MyComponent extends AbstractComponent {
constructor(private anotherService: AnotherService) {
super(); // This gives an error as super constructor needs an argument
}
}
我可以通过在每个组件中注入MyService并将其用作super()调用的参数来解决这个问题，但这绝对是一种荒谬的方法。
如何正确组织我的组件，以便它们从超类继承一个服务？
我可以通过在每个组件中注入MyService并使用该参数调用super()来解决这个问题，但这显然有些荒谬。
这并不荒谬。这就是构造函数和构造函数注入的工作原理。
每个可注入类都必须将其依赖项声明为构造函数参数，如果父类也有依赖项，则需要在子类的构造函数中列出这些依赖项，并使用super(dep1, dep2)调用将它们传递给父类。
通过传递一个注入器并即时获取依赖项存在严重缺陷。
它隐藏了依赖项，使代码更难阅读。
它违反了熟悉Angular2 DI工作方式的人的期望。
它破坏了离线编译，后者生成静态代码以替换声明式和命令式DI，以改善性能并减少代码大小。
super调用），而这个数字在未来只会增长。所以有两件事：1）我不想看到“大型代码库”这样做；和2）谢天谢地有vim的“q”和vscode的“ctrl + .”。 - user4275029更新的解决方法，使用全局注入器来防止生成多个myService实例。
import {Injector} from '@angular/core';
import {MyServiceA} from './myServiceA';
import {MyServiceB} from './myServiceB';
import {MyServiceC} from './myServiceC';
export class AbstractComponent {
protected myServiceA:MyServiceA;
protected myServiceB:MyServiceB;
protected myServiceC:MyServiceC;
constructor(injector: Injector) {
this.settingsServiceA = injector.get(MyServiceA);
this.settingsServiceB = injector.get(MyServiceB);
this.settingsServiceB = injector.get(MyServiceC);
}
}
export MyComponent extends AbstractComponent {
constructor(
private anotherService: AnotherService,
injector: Injector
) {
super(injector);
this.myServiceA.JustCallSomeMethod();
this.myServiceB.JustCallAnotherMethod();
this.myServiceC.JustOneMoreMethod();
}
}
this.myServiceA = injector.get(MyServiceA);等等吧？ - jenson-button-eventInjector 来避免将任何参数链接到 AbstractComponent 上？顺便说一下，我认为通过将属性注入依赖项到广泛使用的基类中以避免混乱的构造函数链接是通常规则的完全有效的例外。 - quentin-starin我创建了一个提供服务的类，而不是手动注入所有服务，例如，它会自动注入服务。然后将此类注入到派生类中，并传递给基类。
派生类：
@Component({
...
providers: [ProviderService]
})
export class DerivedComponent extends BaseComponent {
constructor(protected providerService: ProviderService) {
super(providerService);
}
}
基础类：
export class BaseComponent {
constructor(protected providerService: ProviderService) {
// do something with providerService
}
}
服务提供类：
@Injectable()
export class ProviderService {
constructor(private _apiService: ApiService, private _authService: AuthService) {
}
}
inject()https://angular.io/api/core/inject非常简单，因为您现在可以在“字段初始化器”中设置依赖项，而完全不需要构造函数。DOCUMENT和LOCALE_ID作为示例。import { DOCUMENT } from '@angular/common';
import { inject } from '@angular/core';
export abstract class AbstractComponent {
abstractDependency = inject(DOCUMENT);
}
import { Component, inject, LOCALE_ID } from '@angular/core';
import { AbstractComponent } from './abstract.component';
@Component({
selector: 'my-app',
template: '{{ abstractDependency }} {{ myDependency }}',
})
export class MyComponent extends AbstractComponent {
myDependency = inject(LOCALE_ID);
}
实时范例：https://stackblitz.com/edit/angular-ivy-zvlx1d?file=src/app/my.component.ts
该链接提供了一个Angular应用程序的实时示例，您可以在其中查看和编辑my.component.ts文件。这是一个很好的学习资源，以便更好地理解Angular框架的使用方法。不要像这样注入一个有所有其他服务作为依赖项的服务：
class ProviderService {
constructor(private service1: Service1, private service2: Service2) {}
}
class BaseComponent {
constructor(protected providerService: ProviderService) {}
ngOnInit() {
// Access to all application services with providerService
this.providerService.service1
}
}
class DerivedComponent extends BaseComponent {
ngOnInit() {
// Access to all application services with providerService
this.providerService.service1
}
}
class BaseComponent {
constructor(protected service1: Service1, protected service2: Service2) {}
}
class DerivedComponent extends BaseComponent {
ngOnInit() {
this.service1;
this.service2;
}
}
你的问题完全与组件继承有关。很可能，你来到这个问题是因为在每个派生类中需要重复的非DRY（WET？）代码太多了。如果你想要所有组件和服务的一个统一入口，你需要进行额外的步骤。
每个组件都扩展了BaseComponent。
如果你决定使用派生类的构造函数，也会有一个缺点，那就是你需要调用 super() 并传入所有依赖项。虽然我并不真正看到必须使用 constructor 而不是 ngOnInit 的用例，但完全有可能存在这样的用例。
不久前，我的一些客户想将两个大型Angular项目合并到昨天（将Angular v4合并到Angular v8）。项目v4为每个组件使用BaseView类，并包含tr(key)方法进行翻译（在v8中，我使用ng-translate）。因此，为了避免切换翻译系统并编辑数百个模板（在v4中），或者同时设置2个翻译系统，我使用以下丑陋的黑客（我并不为此感到自豪）- 在AppModule类中，我添加了以下构造函数：
export class AppModule {
constructor(private injector: Injector) {
window['UglyHackInjector'] = this.injector;
}
}
AbstractComponent。export class AbstractComponent {
private myservice: MyService = null;
constructor() {
this.myservice = window['UglyHackInjector'].get(MyService);
}
}
如果父类已经来自第三方插件（且您无法更改源代码），则可以这样做：
import { Injector } from '@angular/core';
export MyComponent extends AbstractComponent {
constructor(
protected injector: Injector,
private anotherService: AnotherService
) {
super(injector.get(MyService));
}
}
或者更好的方式（只在构造函数中保留一个参数）：
import { Injector } from '@angular/core';
export MyComponent extends AbstractComponent {
private anotherService: AnotherService;
constructor(
protected injector: Injector
) {
super(injector.get(MyService));
this.anotherService = injector.get(AnotherService);
}
}
new MyService()而不是注入，则可以获得完全相同的结果（除了更高效外）。如果你想要在不同服务和/或组件之间共享同一服务实例，这种方法将行不通。每个类都将获得另一个MyService实例。 - Günter ZöchbauermyService实例。我找到了一个避免这种情况但需要在派生类中添加更多代码的解决方案... - maxhb