手动注入服务

Question

我有从A类继承的组件B，C，D。

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

我尝试的是一个普通的注射：

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

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

有没有办法使用Angular 2注入到父类中？

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

一些例子:我有很多页面，每个页面都可以显示一个加载器。我不是每次都注入加载器，而是从每个页面管理加载器，我想要做的是：

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

您可以通过使用服务定位器服务来解决此问题。这将允许您轻松地获取任何服务并在您的父类中使用它，而不必通过它们的子类注入它们(因为这可能是一种痛苦)。

因此，要使用它，请创建一个简单的类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;
    }
}

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

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

并像这样使用它：

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

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

现在，您已经将您的服务注入了一个可扩展的父组件中，并且它可以在您的子组件中使用，而不必将其传递到super()中。

Answer 2

看一下这段代码。

@Injectable({ providedIn: "root" })
export class MyService {
   constructor(...) {
      MyService.ms = this;
   }
   static ms: MyService;

这是因为Angular创建了单例实例。唯一的要求是某个组件在使用变量ms之前，必须在CTOR中使用了MyService。

如下所示：

@Component
export class MyComponent {
//this will set the static value
constructor(private MyService) { }
...

Answer 3

在我的Angular 10中运行'ng serve --aot‘的情况下，我必须使用：

export class BaseComponent {

    public loader;

    constructor() 
    {
        setTimeout(() => {
            this.loader = ServiceLocator.injector.get(LoadingService);
        }, 0);
    }

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

这是因为现在似乎先执行服务构造函数中的代码，然后再执行模块中将Injector实例分配给ServiceLocator服务的构造函数，如果不使用setTimeout() hack，则会导致ServiceLocator.injector未定义。对如何改进这一点有什么想法吗？