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

1

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

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

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

  • 0
    нашел эту ссылку полезной, но этот подход работает только на стороне клиента из-за инициализации в файле main.ts blogs.msdn.microsoft.com/premier_developer/2018/06/17/...
Теги:
angular
dependency-injection
angular-universal

1 ответ

0

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

Поскольку 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: [],
                }
            ]
        });
    }
}

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню