Question

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

我想在班级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 './locater.service.ts';

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

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

现在，要在超类（BaseComponent）中使用它，只需导入 ServiceLocator

import {ServiceLocator} from './locater.service.ts';

并使用它：

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

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

现在，您已将服务注入可扩展父级，并且可以在子组件中使用，而无需在super（）中传递它。

Answer 2

对于在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不确定未使用。关于如何改善这一点的任何想法？

Answer 3

看看这段代码。

@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) { }
...

手动注入服务

3 个答案: