Angular 2：手动注入服务

发布时间：2020-12-17 07:52:55 所属栏目：安全来源：网络整理

导读：我有继承自A类的组件B,C,D. 我想在A类中使用一个服务,但我不知道如何注入它,而不是从它的孩子那里注入它. 我尝试的是正常注射：构造函数(pageName：string = null,translate：TranslateService){ 但是当我执行super()来构造类A时,它会抛出一个错误,因为我没

我有继承自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()中传递它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!