Angular 14 inject 函数使用过程中的一些注意事项

简介: Angular 14 inject 函数使用过程中的一些注意事项

inject 函数只能用于构造器阶段,这意味着其只能在构造器函数作用域(constructor function scope)和字段初始化器(field initializers)中使用。

下列代码会遇到运行时错误(runtime error):


image.png


因为使用到了 inject 函数的 fetchEntity 方法,在构造函数作用域之外的上下文里被调用,不符合 inject 函数的使用前提。


当在构造函数阶段之外调用 refreshEntity 方法时,上面的代码将引发运行时错误,例如在单击按钮时,因为 fetchEntity 使用了 inject()。 当用于初始化 entity$ 属性时,它不会抛出此错误,因为它处于构造函数阶段。


解决方案也不难,使用 JavaScript 的 closure 闭包概念:


image.png


在上面的例子中,因为我们使用了一个闭包,所以我们能够将注入的 HttpClient 和 ActivatedRoute 存储在闭包范围内,并且仍然使用返回函数中的值。因此,我们可以在构造函数阶段之外利用 inject() 函数。


正如我们在上面的示例中已经看到的那样,使用 inject 函数能够保持组件符合单一职责的设计准则(single responsibility)和无依赖注入。


依赖注入或 DI 是 Angular 中的基本概念之一。 DI 被连接到 Angular 框架中,并允许具有 Angular 装饰器的类(例如组件、指令、管道和可注入)配置它们需要的依赖项。


DI 系统中存在两个主要角色:依赖消费者和依赖提供者。


我们不再直接在组件构造函数中依赖 HttpClient 或 ActivatedRoute。 相反,我们创建了一个可注入的函数来处理业务逻辑,这种思路类似于我们如何将逻辑提取到一个 Facade 服务中。并且 Angular 的最佳事件认为,Component 需要完成的业务逻辑最好都封装到一个专门的 Facade 服务中。

使用 inject() 函数,我们不再需要组件中的任何依赖项。



相关文章
|
5月前
|
设计模式 监控 前端开发
Angular ngOnChanges(changes SimpleChanges) 的作用和使用场景
Angular ngOnChanges(changes SimpleChanges) 的作用和使用场景
|
存储 JavaScript 前端开发
Angular 14 inject 函数使用过程中的一些注意事项
Angular 14 inject 函数使用过程中的一些注意事项
|
5月前
|
JavaScript 前端开发 安全
Angular Renderer2 的作用和使用场景介绍
Angular Renderer2 的作用和使用场景介绍
|
12月前
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
Angular 应用里 NullInjectorError - No provider for XX 错误的一个场景和分析过程
|
12月前
|
开发框架 前端开发 UED
Angular 中懒加载模块初始化技术详解
Angular 中懒加载模块初始化技术详解
|
12月前
Angular ModuleWithProviders 类型的使用场景介绍
Angular ModuleWithProviders 类型的使用场景介绍
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
从 Angular Component 和 Directive 的实例化,谈谈 Angular forRoot 方法的命令由来
同 Angular service 的单例特性不同,Angular 组件和指令通常会被多次实例化,比如 HTML markup 中每出现一次 Component 的 selector,就会触发 Component 的一次实例化。
|
网络架构
关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论
关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论
angular定义数组的三种方式
angular定义数组的三种方式
509 0