Angular 14 新的 inject 函数介绍
Angular 函数 介绍 14 Inject
2023-09-14 09:03:59 时间
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 现在根本不需要构造函数注入。这允许组件符合了设计的单一职责准则,而不是组件+数据聚合器。
相关文章
- SAP 电商云 Spartacus UI Angular UI 和 Accelerator JSP UI 的混合使用
- angular子组件传值到父组件_vue子组件传值给父组件
- 前端必读3.0:如何在 Angular 中使用SpreadJS实现导入和导出 Excel 文件
- Angular HTTP 请求自定义 timeout 值的一种实现思路
- Angular 里 HTTP 请求和响应结构的拦截器(interceptors)在 SAP Spartacus 中的应用
- angular面试题及答案_angular面试
- angular基础面试题_java web面试题
- Angular 应用里 index.html 的作用
- 【Angular教程】-组件通信|8月更文挑战
- 关于 Angular 开发时对主流浏览器支持的话题
- Angular 项目多国语言设置
- 什么是 Angular library 的 secondary entry points?