Создание сервисной фабрики в Angular, которая передает входные данные от компонента поставщику - PullRequest
Новая
       17

Создание сервисной фабрики в Angular, которая передает входные данные от компонента поставщику

0 голосов
/ 31 января 2019

У меня есть ряд повторяющихся компонентов, которые, возможно, должны сравнивать друг друга.

т.е. каждый компонент заполняется сам с помощью асинхронного запроса с определенным для него числом, и затем я хочу бытьвозможность стилизовать содержимое этого компонента в разные цвета в зависимости от того, выше он или ниже, чем у его братьев и сестер.Не уверен, как это представить, но он рендерит что-то вроде этого: 

<app-content>123</app-content>
<app-content>345</app-content>

За исключением <app-content>, тянет объект и может иметь разные вложенные компоненты, которые нужно сравнивать ...

Итак, я подумал о директиве для вложенных компонентов, которые взаимодействуют с «соответствующим экземпляром службы».

Таким образом, визуализированный html будет выглядеть примерно так: 

<app-content-block>
    <app-content app-compare-with="compare_1">1234</app-content>
    <app-content app-compare-with="compare_2">100.05</app-content>
</app-content-block>
<app-content-block>
    <app-content app-compare-with="compare_1">4567</app-content>
    <app-content app-compare-with="compare_2">0.99</app-content>
</app-content-block>

Там будетComparisonService, а ComparisonServiceProvider и ComparisonServiceFactory.

. ComparisonServiceFactory будет создавать и отслеживать экземпляры ComparisonService на основе id, предоставленной входом директивы (то есть compare_1 и compare_2 в приведенном выше примере).Что-то вроде: 

export function comparisonServiceFactory(comparisonId: string) {
  var comparisonServiceMap: any = {};

  if(!comparisonServiceMap[comparisonId]) {
    comparisonServiceMap[comparisonId] = new ComparisonService(comparisonId)
  }
  return comparisonServiceMap[comparisonId];
}

ComparisonServiceProvider будет иметь вид: 

export let comparisonServiceProvider = {
  provide: ComparisonService,
  useFactory: comparisonServiceFactory
};

И директива app-compare-with будет выглядеть примерно так: 

@Directive({
  selector: '[appCompareWith]',
  providers: [ comparisonServiceProvider ]
})
export class CompareWithDirective {

  @Input('appCompareWith') comparisonServiceName: string;


  constructor() { // does stuff... 
  }
}

Проблема в том, что ...

  1. Мне не удалось выяснить, как передать comparisonServiceName в comparisonServiceProvider в декларации директивы, чтобы она потом моглабыть в свою очередь передано ComparisonServiceFactory.Все примеры, которые я нашел, касаются использования зависимостей (свойство dep), основанных на других сервисах DI (или пользовательских токенах ConfigService или DI, и я ничего не могу найти, пропустив простую строку черезот компонента / директивы до завода.

  2. Возможно ли на самом деле возможно? Или я должен использовать другой метод? Потому что из того, что я также читалв документах экземпляры службы управляются внутренне, а создание разных экземпляров одной и той же службы сводится к «песочнице» экземпляра службы к компоненту, в который он внедрен.

Любая помощьБуду признателен, спасибо заранее!

...