angular - 手动注入(inject)服务

Question

我有继承自 A 类的组件 B、C、D。

我想在 A 类中使用一个服务，但我不知道如何注入(inject)它，而不是从它的子级注入(inject)它。

我试过的是普通注入(inject):

constructor(pageName: string = null, translate: TranslateService) {

但是当我使用 super() 构造类 A 时，它会抛出一个错误，因为我没有提供第二个参数。

有没有办法使用 Angular 2 注入(inject)父类？

我被迫使用的Angular版本是:2.2.1

一些示例案例:我有很多页面，每个页面都可以显示一个加载程序。不是每次都注入(inject)加载器，并从每个页面管理加载器，我想做的是:

export class BaseComponent {
    constructor(private loader: LoadingService) {}
    
    showLoading() {
        this.loader.show();
    }
}

然后从组件本身继承:

@Component({
    selector: "page-login",
    providers: [UsersService],
    templateUrl: "login.html"
})
export class LoginPage extends BaseComponent {
    constructor(private usersService: UsersService) {
        super();
    }
}

现在 LoginPage 有一个来自其父级的方法 showLoading。

Answer 1

您可以使用服务定位器服务来解决这个问题。这将很容易让您获得任何服务并在您的父类中使用它，而不必通过他们的 child 注入(inject)它们(因为这可能很痛苦)。

因此，要使用它，请创建一个简单的类 locator.service.ts:

import {Injector} from "@angular/core";

export class ServiceLocator {
    static injector: Injector;
}

在您的 app.module.ts 中导入此服务:

import {ServiceLocator} from './locator.service';

然后在你的模块文件(app.module.ts？)的构造函数中，初始化这个东西，这样你就可以在任何地方使用它:

export class AppModule {
    constructor(private injector: Injector){    // Create global Service Injector.
        ServiceLocator.injector = this.injector;
    }
}

现在，要在您的父类(super class)(您的 BaseComponent)中使用它，只需导入 ServiceLocator

import {ServiceLocator} from './locator.service';

并像这样使用它:

export class BaseComponent {
    public loader;
    constructor() {
        this.loader = ServiceLocator.injector.get(LoadingService)
    }

    showLoading() {
        this.loader.show();
    }
}

现在您已经将您的服务注入(inject)到一个可扩展的父组件中，它可以在您的子组件中使用，而无需在 super() 中传递它。