角度 - 通过@Input属性进行依赖注入



@Input属性中注入'服务'依赖项是一种好的做法吗?此上下文中的服务不是在根级别管理的单一实例,而是接口的不同实现的多个实例。

考虑以下示例:在 Angular 库中,ShapeComponent 依赖于 ShapeService(接口(。

元件

@Component({
selector: 'ex-shape',
templateUrl: '..',
})    
export class ShapeComponent {
constructor(shapeServiceCtor: ShapeService)

@Input shapeServiceInput: ShapeService;
}

解决依赖项的一种简单方法是设置输入属性,如以下代码所示。

<ex-shape [shapeServiceInput]="rectangleShapeService" />
<ex-shape [shapeServiceInput]="ellipseShapeService" />
<ex-shape [shapeServiceInput]="polygonShapeService" />

上述方法在解决组件中的依赖关系方面是否有效?

如果使用输入属性方法,则服务/依赖项必须以相同的方式传播到子组件。此方法的缺点是父组件必须接受所有依赖项作为输入属性。

是否有任何推荐的方法可以在库级别注入和限定依赖项?

在这一点上,您并没有真正使用 Angular 的依赖注入,在您的情况下,我不确定这是好是坏。

如果 ShapeComponent 无法知道它正在使用的服务实例,并且每次调用它都需要传递任意实例,这应该没问题。

如果 ShapeComponent 的父级将始终传递服务的同一实例,则父级可以将其包含在providers数组中,然后子项 ShapeComponents 将使用相同的实例。

Angular 的文档提供了有关 DI 层次结构 https://angular.io/guide/hierarchical-dependency-injection 的更多详细信息

constructor(shapeServiceCtor: ShapeService)的调用也会导致一些混淆,因为组件将同时注入 DI 和来自@Input的另一个(或可能相同(实例

这可能适用于您的情况:

@Component({
selector: 'ex-shape',
templateUrl: '..',
})    
export class ShapeComponent {
// change the type to any since any service will be comping as input
private shapeServiceCtor: any;
constructor(
private injector: Injector // injector to inject incoming services
) {}
// type as any
@Input shapeServiceInput: any;
ngOnInit() {
// this will inject the service
this.shapeServiceCtor = this.injector(shapeServiceInput);
}
}
">

注入"这样的服务将不起作用。您必须传递所述服务的实例。相反,请尝试创建多个形状组件,如果它们共享功能,则让它们扩展基本组件或使用要在它们之间共享的服务。

您应该将providedIn设置为@Injectable装饰器的true

您的想法是使用单例,单例注入可以通过providedIn设置为true来实现。

然后,您无需深入使用@Input装饰器,只需导入服务并在要使用的组件中使用它即可。

所以格式应该是这样的。

@Injectable({
providedIn: true
})
export class SomeService {
...
}

从 @Injectable (( 修饰器中删除参数。它确保服务不在根级别提供:

@Injectable()
export class ShapeService{

可以在组件级别声明服务,并且可以像往常一样将服务注入任何子组件。子组件将获得与父组件相同的实例。

在 ShapeComponent 中,您可以在 @Component 装饰器中提供服务:

@Component({
selector: 'ex-shape',
templateUrl: '..',
providers:  [ ShapeService ]
})    
export class ShapeComponent {
constructor(private shapeServiceCtor: ShapeService)

这假定您希望为每个 ShapeComponent 创建一个新的 ShapeService 实例。

@Input和@Output用于通信,一个组件与另一个组件之间的通信。 @Input会将我们的变量暴露在组件的外部。依赖注入是一个不同的概念,在依赖注入中,我们在构造函数中注入组件和内置类,这将为我们所用。@Input绝对不是一个正确的方法。

最新更新