代码之家 › 专栏 › 技术社区 › Raghav Garg

Injector中提供的Angular 6通用服务需要另一个应用程序注入变量

angular-universal dependency-injection angular javascript

Raghav Garg · 技术社区 · 7 年前

我用的是角度通用。我创造了一个 PlatformService 以检测我当前使用的平台。

/* platform.service.js */

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Injectable({
    providedIn: 'root'
})
export class PlatformService {

    constructor(
        @Inject(PLATFORM_ID) private platformId: Object
    ) {
        this.platformId; // this is coming out undefined
    }

    isBrowser() {
        return isPlatformBrowser(this.platformId);
    }

    isServer() {
        return isPlatformServer(this.platformId);
    }
}

我正在创造一个 BaseComponent 用于常规处理我的路由绑定组件。

/* base.component.ts */

import { Component, OnInit, Inject } from '@angular/core';

import { InjectorHolderService } from '@core/services/util/injector-holder.service';
import { PlatformService } from '@core/services/util/platform.service';

@Component({
    selector: 'app-base',
    template: '',
})
export class BaseComponent implements OnInit {

    protected platformService: PlatformService;

    constructor() {
        this.platformService = InjectorHolderService.injector.get(PlatformService);
        console.log(this.platformService);
    }
}

由于这个组件将被许多组件继承,所以我不想通过 平台服务 通过 super() .所以我决定继续创造一个 Injector .

/* app.module.ts */

import { InjectorHolderService } from '@core/services/util/injector-holder.service';
import { PlatformService } from '@core/services/util/platform.service';

@NgModule({ ... })
export class AppModule {
    constructor() {
        InjectorHolderService.injector = Injector.create({
            providers: [
                {
                    provide: PlatformService,
                    useClass: PlatformService,
                    deps: [], // I think i need to put something here, but not sure.
                }
            ]
        });
    }
}

以及一个可以容纳所有注入模块供将来使用的服务。

/* injector-holder.service.ts */

import { Injectable, Injector } from '@angular/core';

@Injectable({
    providedIn: 'root'
})
export class InjectorHolderService {

    static injector: Injector;
}

但是 @Inject(PLATFORM_ID) private platformId: Object 他正在放弃 undefined ,因此我无法检测平台。

我错过了什么?或者如果有更好的方法来实现上述功能。

如果你们需要看其他文件,请告诉我。

1 回复 | 直到 7 年前

Raghav Garg 7 年前

我不确定以下方法是好是坏,目前,这是唯一对我有效的方法。我很想听到任何新的方法。

自从 PlatformService 需要 @Inject(PLATFORM_ID) 这只提供给 AppModule 新的 Injector 我创造的一切都没有价值 @注入(平台ID) 因此没有定义。

所以,不用类 平台服务 在里面 注射器 ,现在我正在使用 平台服务 的实例化对象,因此能够很好地访问 BaseComponent .

修改了我的 应用模块 例如:

/* app.module.ts */

import { InjectorHolderService } from '@core/services/util/injector-holder.service';
import { PlatformService } from '@core/services/util/platform.service';

@NgModule({ ... })
export class AppModule {
    constructor(
        private platformService: PlatformService,
    ) {
        InjectorHolderService.injector = Injector.create({
            providers: [
                {
                    provide: PlatformService,
                    useValue: this.platformService, // notice the change of key, using value not class
                    deps: [],
                }
            ]
        });
    }
}

如果有人想探索更多,我们将尝试添加一个最小回购协议来重现这个问题,并与大家分享。