Question

我有一系列可重复的组件，可能需要相互比较。

即每个组件都使用一个异步请求填充其自身的编号，然后，我希望能够根据该组件的内容是高于还是低于其同级元素来为其设置不同的颜色。不知道如何表示它，但是它呈现出类似这样的内容：

<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... 
  }
}

问题是...

我一直无法弄清楚如何将comparisonServiceName传递给指令的声明中的comparisonServiceProvider，以便可以依次将其传递给{ {1}}。我一直在寻找的示例都是基于基于其他DI服务（或自定义构建的ComparisonServiceFactory或DI令牌）的依赖项（dep属性），而我仅通过传递就找不到任何东西从组件/指令到工厂的简单字符串。
这真的可能吗？还是应该使用其他方法？因为根据我在文档中一直阅读的内容，服务实例是在内部进行管理的。而要创建同一服务的不同实例，则是将服务实例“沙盒化”到注入它的组件上。

任何帮助将不胜感激，在此先感谢您！

在Angular中创建一个服务工厂，将输入从组件传递到提供程序

0 个答案: