Angular 14 新的 inject 函数介绍
Angular 函数 介绍 14 Inject
2023-06-13 09:15:13 时间
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 现在根本不需要构造函数注入。这允许组件符合了设计的单一职责准则,而不是组件+数据聚合器。
相关文章
- 怎么组织 Angular 项目 |Top 5 技巧
- 自定义 angular-datetime-picker 格式
- 一个 Angular 开发人员对腾讯 Cloud Studio 使用后的体验报告
- 关于 Angular HttpClient 的单例特性的思考
- 前端人员该怎么面试 经典Angular面试题有哪些[通俗易懂]
- 使用 Angular 14 的 inject 函数优化对 Ngrx 的使用方式
- Angular 应用里 index.html 的作用
- 使用 Angular Universal 进行服务器端渲染避免 window is not defined 的错误消息
- 干货 | 一文搞懂在AlmaLinux上安装Angular JavaScript框架
- 关于 Angular 开发时对主流浏览器支持的话题
- 关于 Angular 应用部署时的 base-href 参数
- 什么是 Angular library 的 secondary entry points?
- 基于豆瓣API+Angular开发的webApp
- Angular用来控制元素的展示与否的原生指令介绍