Angular 2:手动注入服务

前端之家收集整理的这篇文章主要介绍了Angular 2:手动注入服务前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有继承自A类的组件B,C,D.

我想在A类中使用一个服务,但我不知道如何注入它,而不是从它的孩子那里注入它.

我尝试的是正常注射:

构造函数(pageName:string = null,translate:TranslateService){

但是当我执行super()来构造类A时,它会抛出一个错误,因为我没有提供第二个参数.

有没有办法使用Angular2注入父类

我被迫使用的角度版本是: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来自它的父级.

您可以使用服务定位器服务来解决此问题.这将很容易让你得到任何服务,并在你的父类中使用它,而不必通过他们的孩子注入它们(因为这可能是一个痛苦).

所以要使用它,创建一个简单的类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()中传递它.

猜你在找的Angularjs相关文章