Я использую 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
, из-за которых я не могу обнаружить платформу.
Что мне здесь не хватает? или Если есть лучший подход для достижения вышеуказанных функций.
Пожалуйста, дайте мне знать, если вы, ребята, должны увидеть любой другой файл.
Я не уверен, является ли следующий подход хорошим или плохим, в настоящее время это единственное, что работает для меня. Хотелось бы услышать любой новый подход к нему.
Поскольку 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: [],
}
]
});
}
}
Попробуем добавить минимальное репо, чтобы воссоздать эту проблему и поделиться с вами парнями, если кто-то захочет изучить больше.
main.ts
blogs.msdn.microsoft.com/premier_developer/2018/06/17/...