Универсальный сервис Angular 6, предоставляемый в Injector, нуждается в другой введенной переменной приложения - PullRequest
Новая
       11

Универсальный сервис Angular 6, предоставляемый в Injector, нуждается в другой введенной переменной приложения

0 голосов
/ 30 ноября 2018

Я использую 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 для обычной обработки моих компонентов, связанных с маршрутами.

/* 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);
    }
}

Поскольку этот компонент будет наследоваться многими компонентами, я не хотел передавать 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 даетout undefined, из-за которого я не могу обнаружить платформу.

Что мне здесь не хватает?или Если есть лучший подход для достижения вышеуказанной функциональности.

Пожалуйста, дайте мне знать, если вам, ребята, нужно посмотреть какой-либо другой файл.

1 Ответ

0 голосов
/ 30 ноября 2018

Я не уверен, является ли следующий подход хорошим или плохим, в настоящее время он работает только для меня.Хотелось бы услышать любой новый подход к нему.

Поскольку PlatformService требуется @Inject(PLATFORM_ID), который предоставляется только от AppModule, новый созданный Injector не смог найти никакого значениядля @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: [],
                }
            ]
        });
    }
}

Попытается добавить минимальное репо, чтобы воссоздать эту проблему и поделиться с вами, ребята, если кто-то захочет узнать больше.

...