Angular 2如何为同一组件的子级提供不同的依赖关系
从angular中,我看到子组件可以使用抽象类请求依赖项,父组件可以为子组件的依赖项提供具体的类。Angular 2如何为同一组件的子级提供不同的依赖关系,angular,dependency-injection,Angular,Dependency Injection,从angular中,我看到子组件可以使用抽象类请求依赖项,父组件可以为子组件的依赖项提供具体的类。 例如: @Component({ ... providers:[{provide: AbstractService, useClass: ConcreteService}] }) export class ParentComponent{} @Component({...}) export class ChildComponent{ constructor(private
例如:
@Component({
...
providers:[{provide: AbstractService, useClass: ConcreteService}]
})
export class ParentComponent{}
@Component({...})
export class ChildComponent{
constructor(private service:AbstractService){}
}
通过这样做,子组件可以非常灵活。它的行为可能会有所不同,具体取决于它的父项注入到其中的依赖项。但是,如果一个父级有多个相同类型的子级,它如何为每个子级提供不同的依赖项。
假设我有一个名为Searchbar的子组件。一个父级需要有两个搜索栏,一个搜索一些硬编码的虚拟数据,一个向服务器获取请求。我可以通过用不同的父对象包装每个子对象来添加另一层,以便提供不同的服务。有更简单的方法吗?我不确定我是否在这个问题上讲清楚了。然而,在重新思考架构之后,我将回答我自己的问题。如果您有更好的解决方案,请发表评论。
问题是如何提供相同的组件和不同的服务。就像如何将一个按钮注入服务以提交表单,另一个按钮注入服务以保存文件一样,这两个按钮位于同一父项下,并且来自同一组件类。
我可以将这两个服务注入按钮,并在按钮上设置一个标志以使用其中一个服务。这是不可扩展的,将使按钮非常复杂。
更好的方法是使按钮哑巴。按钮不应该关心如何处理数据。它应该只在用户单击并让家长处理其他事情时发出事件。
与上面的搜索栏相同。Searchbar不应该关心数据来自何处,父级应该执行所有查询,并将一个干净格式的数据数组传递给Searchbar。
2016年6月9日更新
随着Angular RC5和RC6的发布,Angular被引入。同一模块中的组件共享模块中列出的依赖项。如果我们想要控制单个组件的依赖关系,我们可能会为每个组件创建一个模块。至少这是我从中看到的。不过,我还是会尽量使大多数组件保持沉默,这样它们就不需要依赖性。回答您最初的问题:(如果我现在理解的话) 出于某种原因,如果您使用
提供:。。。useClass:…
语法和“使用的类”(ConcreteService
在您的示例中)与您请求的类(在您的示例中为AbstractService
)具有不同的依赖关系,除非隐式声明它们,否则无法注入这些依赖关系:
{
provide: AbstractClass,
useClass: ConcreteClass,
deps: [SomeServiceUsedInConcreteClass, ...]
}
如果有人知道更好的/替代的方法来完成同样的事情,请发表评论 您仍然可以向组件添加提供程序。和以前一样。仅从
@Component()
中删除了指令
和管道
。不能在单个组件中控制提供程序范围。不过,您可以使用从父组件到子组件的绑定来传递服务<代码>父组件注入service1
和service2