关于前端:Angular-14-新的-inject-函数介绍

41次阅读

共计 828 个字符,预计需要花费 3 分钟才能阅读完成。

Angular 14 提供了一些十分乏味的个性:类型化表单(typed forms)、独立组件(standalone components),以及本文将要介绍的内容,即在所谓的结构器阶段(constructor phase) 应用 inject 函数的能力。

什么是 inject 函数

inject() 函数将 InjectionToken 作为参数,并从以后 active 的注入器返回该 InjectionToken 的值。简而言之,这是另一种不应用 constructor injection 而依然可能获取依赖项的办法。

看个具体的例子:

什么是 constructor phase

结构器阶段意味着结构器函数作用域(constructor function scope)和字段初始化器(field initializers)。这意味着不能在 @Input() 设置器或任何其余函数或生命周期挂钩中调用 inject() 函数。

下图 title setter 中视图调用 inject 函数,会呈现 Angular 编译谬误。

应用 inject 函数升高 Component 的复杂度

假如咱们须要在组件中增加一个路由器门路 (router path) 参数,以便从 API 获取实体详细信息。

让咱们看看不应用 inject() 函数(或任何其余外观服务即 facade service)的状况。

下面的例子是传统的基于构造函数的注入实现形式,存在三个缺点:

  • 该 Component 依赖于 HttpClient(或执行 API 调用的其余外观服务)。
  • 该 Component 依赖于 ActivatedRoute。
  • 在组件实现中有业务逻辑,它应该只负责显示 UI,而不是放心如何获取数据。

应用 inject 函数,改良后的实现:

在下面的代码中,组件疏忽了从服务器获取实体所需的内容。它所晓得的是它当初有一个名为 entity$ 的属性,用于存储 Observable<Entity>。Component 当初基本不须要构造函数注入。这容许组件合乎了设计的繁多职责准则,而不是组件 + 数据聚合器。

正文完
 0