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

Question

我正在使用 Angular Universal。我创建了一个 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 来对我的路由绑定(bind)组件进行通用处理。

/* 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()传递PlatformService。所以我决定着手创建一个 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.
                }
            ]
        });
    }
}

还有一个服务可以保存所有注入(inject)的模块以供将来使用。

/* 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，因此我无法检测到平台。

我在这里错过了什么？或者是否有更好的方法来实现上述功能。

如果你们需要查看任何其他文件，请告诉我。

Answer 1

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

因为 PlatformService 需要 @Inject(PLATFORM_ID) 而它仅由 AppModule 提供，新的 Injector 我created 无法为 @Inject(PLATFORM_ID) 找到任何值，因此未定义。

所以，现在我使用 PlatformService 的实例化对象，而不是在 Injector 中使用类 PlatformService，因此能够访问所有内容在 BaseComponent 中很好。

修改我的 AppModule 如下:

/* 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: [],
                }
            ]
        });
    }
}

将尝试添加一个最小的 repo 来重现这个问题并与大家分享，如果有人想探索更多的话。